仅使用 CSS 进行视差滚动？答案

【问题标题】：Parallax scrolling with CSS only?仅使用 CSS 进行视差滚动？
【发布时间】：2019-01-27 18:15:29
【问题描述】：

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

但是，我能找到的只是 JavaScript 或 Jquery，而我只精通 CSS3。

能否仅使用 CSS3（如果需要，使用 HTML5）实现视差滚动，而不是使用 jquery 插件？如果我能指出一些相同的教程，那就太好了。

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

【问题讨论】：

我认为仅使用 CSS 是不可能的。您必须检测滚动（以及当前查看的元素）才能实现此效果（CSS afaik 不支持从滚动页面检测位置）。还有一些图像滚动到某个点，然后当某些滚动发生时它们“停止”。这只会为您提供某种类型的脚本来检测这些情况的选项，而 CSS 不会为您提供。 Javascript 用于处理，CSS 仅用于显示元素和一些基本交互（如悬停）。此外，您提供的链接实际上是使用 jQuery 来实现的

标签： html css parallax

【解决方案1】：

搜索parallax pure css并点击first result from CodePen（第二个结果是当前页面:)，一个很好的例子显示了fixed和scrolling背景。作为记录，我将源代码放在这里，也提供对 Chrome、Safari 和 Opera 的支持。

该示例似乎有两种背景：

固定，在所需元素中包含background-attachment: fixed，例如#slide2
滚动，transform: translateZ(-1px) scale(2) 之前是所需的元素，例如#slide1

此外，滚动效果似乎取决于body 的设置transform-style: preserve-3d 才能正常工作。（顺便说一句，IE 不会发生在 support transform-style 上。）

最后，可以通过调整transform 属性来实现不同的滚动速度，例如示例中的两个img 元素。

Source code:

<!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>

【讨论】：

这个源代码示例将真正受益于简化为基本要素。
这个例子很难在现有页面中实现。请注意，<html>-container 不会在此处滚动，而是在正文中滚动。此外，直到实际幻灯片的所有元素都必须设置 height: 100%。
@RoyPrins 我正在处理这个问题，请在下面查看我的答案。

【解决方案2】：

我真的很喜欢KitKat’s answer，但正如 Roy Prins 所建议的那样，将其简化为最基本的要素会非常有帮助，以准确了解什么足以产生这种效果。我在这里做了。

要产生一个非常基本的视差滚动效果，下面的例子就足够了。请注意，浏览器前缀、回退等尚未解决。标有/* e.g. */ 的 CSS 值可由设计人员自行决定更改。

见我的forked pen here。

<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>

对 KitKat 答案的小修正：似乎不需要transform-style:preserve-3d（至少在Chrome中），效果相当取决于body的overflow:auto。去掉这个，视差就失效了。

【讨论】：

这是一个老问题，但我会接受你的回答，因为它是最接近准确的，即使不是第一个。

【解决方案3】：

您应该能够通过使用 CSS 过渡获得至少部分效果。然而，正如 Alejandro 提到的，CSS 不检测滚动。

看看“超酷的视差滚动效果 - 在纯 CSS3 中！” （http://css.dzone.com/articles/cool-parallax-scrolling-effect）例如。

关键是使用内部页面链接。因此，用户无需滚动，而是单击页内链接，然后页面将向上/向下滚动到新部分。随着页面滚动，过渡提供视差效果。

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>

<p>Scroll Up and Down this page to see the parallax scrolling effect.Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.</p>

<div class="parallax"></div>

<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

</body>
</html>

这是codepen

【讨论】：

【解决方案5】：

是的，如果你想要一个简单的基本视差效果，那么 CSS3 @keyframes rule 就足够了（不是那么视差），但如果你想充分利用视差然后使用javascript是必须的。无论如何，我已经为您提供了两种方式的链接。随意检查它们并使用你想要的

纯 CSS3：

http://jasonlau.biz/home/css/parallax-effect-using-only-css-with-no-javascript /* 带关键帧 */

http://css.dzone.com/articles/cool-parallax-scrolling-effect /* 没有关键帧 */

使用 JQuery：

http://potentpages.com/parallax-tutorials/

http://www.webdesignerdepot.com/2013/07/how-to-create-a-simple-parallax-effect/

http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

http://www.1stwebdesigner.com/css/create-scrolling-parallax-website/