Question

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

然而，我所能找到的只有JavaScript或Jquery，而我只精通CSS3。

视差滚动只能用CSS3实现（如果需要，可以使用HTML5），而不是使用jquery插件吗？如果我可以指向相同的教程，那将是很好的。

注意：这接近我想要产生的效果（http://jessandruss.us/）

Answer 1

搜索parallax pure css并点击first result from CodePen（第二个结果是当前页面:)，会显示一个很好的示例，其中包含已修复和滚动背景。为了记录，我将源代码放在这里，也为Chrome，Safari和Opera提供支持。

该示例似乎有两种背景：

已修复，background-attachment: fixed位于所需元素中，例如#slide2
滚动，在所需元素之前使用transform: translateZ(-1px) scale(2) ，例如#slide1

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

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

Source code：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title> Pure CSS Parallax Scrolling </title>  <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>

Answer 2

我非常喜欢KitKat’s answer，但正如罗伊·普林斯所建议的那样，将它简化为最基本的东西会很有帮助，看看究竟什么足以产生这种效果。我在这里已经这样做了。

要生成非常基本的视差滚动效果，以下示例就足够了。请注意，浏览器前缀，后备等尚未得到解决。标有/* 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中），而且的效果取决于身体的overflow:auto 。删除它，视差失败。

Answer 3

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

看一看“纯粹的CSS3中那种酷视差滚动效果！” （http://css.dzone.com/articles/cool-parallax-scrolling-effect）举个例子。

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

Answer 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