仅使用CSS进行视差滚动？

Question

仅使用CSS进行视差滚动？

Paw*_*wan 22 html css css3 parallax

我一直在做一个项目,我已经完成了内容.然而,对于设计,我正在考虑使用视差滚动技术.

但是,我所能找到的只有JavaScript或Jquery,而我只熟练使用CSS3.

可以使用CSS3实现视差滚动(如果需要,可以使用HTML5),而不是使用jquery插件吗？如果我可以指向一些相同的教程,那将是很好的.

注意:这接近我想要产生的效果(http://jessandruss.us/)

Answer 1

Kit*_*Kat 15

搜索视差纯css并单击CodePen的第一个结果(第二个结果是当前页面:),一个很好的例子显示固定和滚动背景.为了记录,我将源代码放在这里,也为Chrome,Safari和Opera提供支持.

该示例似乎有两种背景:

固定的,与background-attachment: fixed所需的元素一样#slide2
滚动,与transform: translateZ(-1px) scale(2) 之前所期望的元件,如#slide1

此外,滚动效果似乎取决于设定transform-style: preserve-3d的body正常工作.(顺便说一句,IE不支持transform-style.)

最后,通过调整transform属性可以实现不同的滚动速度,就像img示例的两个元素一样.

源代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title> Pure CSS Parallax Scrolling </title>
    <!-- Copyright (c) 2014 by Keith Clark -->
    <style>
        @import url(http://fonts.googleapis.com/css?family=Nunito);
        html {
            height: 100%;
            overflow: hidden;
        }
        body { 
            margin:0;
            padding:0;
            perspective: 1px;
            -webkit-perspective: 1px;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
            font-family: Nunito;
        }
        h1 {
            font-size: 250%
        }
        p {
            font-size: 140%;
            line-height: 150%;
            color: #333;
        }
        .slide {
            position: relative;
            padding: 25vh 10%;
            min-height: 100vh;
            width: 100vw;
            box-sizing: border-box;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
            -webkit-transform-style: inherit;
            transform-style: inherit;
        }
        img {
            position: absolute;
            top: 50%;
            left: 35%;
            width: 320px;
            height: 240px;
            -webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
            transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
            padding: 10px;
            border-radius: 5px;
            background: rgba(240,230,220, .7);
            box-shadow: 0 0 8px rgba(0, 0, 0, .7);
        }
        img:last-of-type {
            -webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
            transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
        }
        .slide:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left:0;
            right:0;
        }
        .title {
            width: 50%;
            padding: 5%;
            border-radius: 5px;
            background: rgba(240,230,220, .7);
            box-shadow: 0 0 8px rgba(0, 0, 0, .7);
        }
        .slide:nth-child(2n) .title {
            margin-left: 0;
            margin-right: auto;
        }
        .slide:nth-child(2n+1) .title {
            margin-left: auto;
            margin-right: 0;
        }
        .slide, .slide:before {
            background: 50% 50% / cover;  
        }
        .header {
            text-align: center;
            font-size: 175%;
            color: #fff;
            text-shadow: 0 2px 2px #000;
        }
        #title {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg");
            background-attachment: fixed;  
        }
        #slide1:before {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }
        #slide2 {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg");
            background-attachment: fixed;
        }
        #slide3:before {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }
        #slide4 {
            background: #222;
        }
    </style>
</head>
<body>
    <div id="title" class="slide header">
        <h1>Pure CSS Parallax</h1>
    </div>
    <div id="slide1" class="slide">
        <div class="title">
            <h1>Slide 1</h1>
            <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
        </div>
    </div>
    <div id="slide2" class="slide">
        <div class="title">
            <h1>Slide 2</h1>
            <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
        </div>
        <img src="http://lorempixel.com/output/abstract-q-c-640-480-6.jpg">
        <img src="http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"> 
    </div>
    <div id="slide3" class="slide">
        <div class="title">
            <h1>Slide 3</h1>
            <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
        </div>
    </div>
    <div id="slide4" class="slide header">
        <h1>The End</h1>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

这个源代码示例真的可以从简单的必需品中减少. (10认同)
此示例很难在现有页面中实现.请注意,`<html>`-container不会在这里滚动,而是滚动正文.此外,实际幻灯片的所有元素都必须设置为"height:100%". (2认同)

Answer 2

chh*_*vey 12

我非常喜欢KitKat的答案,但正如Roy Prins建议的那样,将它简化为最基本的东西是非常有帮助的,看看究竟什么足以产生这种效果.我在这里这样做了.

为了产生非常基本的视差滚动效果,以下示例就足够了.请注意,浏览器前缀,后备等尚未得到解决.标记的CSS值/* e.g. */可能由设计者自行决定更改.

在这里看我的分叉笔.

<html><head><style>
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  body {
    perspective: 1px; /* e.g. */
  }
  .background {
    transform:
      translateZ(-.4px)
      scale(.6)
      translateX(-104%)
      translateY(-40%)
      rotate(-5deg); /* e.g. */
  }
  .foreground {
    transform:
      translateZ(.25px)
      translateX(50%)
      scale(.75)
      rotate(2deg); /* e.g. */
  }
</style></head><body>
  <img class="background"/>
  <img class="foreground"/>
</body></html>

Run Code Online (Sandbox Code Playgroud)

对KitKat答案的一个小修正:似乎不需要transform-style:preserve-3d(至少在Chrome中),而且效果更多地取决于身体overflow:auto.删除它,视差失败.

笔在Firefox中不起作用 (2认同)

Answer 3

tja*_*ite 6

您应该能够通过使用CSS过渡获得至少部分效果.但是,正如Alejandro所说,CSS不会检测滚动.

看一下"那个酷的视差滚动效果 - 在纯CSS3中!" (http://css.dzone.com/articles/cool-parallax-scrolling-effect)举个例子.

关键是使用内部页面链接.因此,用户不是滚动,而是单击页面内链接,然后页面将向上/向下滚动到新部分.当页面滚动时,过渡提供视差效果.

归档时间：	12 年前
查看次数：	47176 次
最近记录：	6 年，10 月前