CSS过渡实现视差效果

Question

CSS过渡实现视差效果

htmlcsscss-transitionsparallax

3

使用CSS过渡效果制作背景图的视差效果是否可能？视差应该比滚动慢，因此需要一些减速 - 是否可以使用CSS实现？如果不行，最好如何使用JS / jQuery实现？

我关心最佳性能脚本，因为我的网页有点超载。

有人可以告诉或展示如何做吗？我会非常感激。

- zyx4sdk

2

不行，因为视差效果需要滚动和CSS无法理解滚动事件，所以我们可以使用CSS制作简单的固定背景效果，但是要实现前景和背景图像移动的原始视差效果，只能使用JavaScript :) - Gaurav Aggarwal

好的，那么如何使用js/jquery来解决它呢？（同时保证最佳性能） - zyx4sdk

如果你真的需要一个移动背景的效果，那么我们需要使用一些强大的JS或插件来适应你的需求。但是，如果你可以接受类似视差效果的固定背景，那么这很简单，你只需要在CSS中放置一个背景图像，并使用background-size:cover属性即可。它会很好地工作。 :) - Gaurav Aggarwal

5

仅使用CSS技术实现是可行的：http://keithclark.co.uk/articles/pure-css-parallax-websites/ - Derek Story

2

@GauravAggarwal，那绝对不是真的 - 请看我的回答。 - Shomz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shomz · Accepted Answer

CSS有一个“perspective”属性，您可以与“zoom”组合使用，以实现元素“在其他元素之后”或“在其他元素之前”，因此它们将以不同的速度滚动。

有许多关于这个的资源，@dwreck08给出的是最好的之一：http://keithclark.co.uk/articles/pure-css-parallax-websites/ 这是一个快速复制：

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 1px;
  perspective: 1px;
}
.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
  color: white;
  background: url(http://cliparts.co/cliparts/pT5/A7L/pT5A7L8T9.png) center no-repeat;
  background-size: 50% auto;
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
  background: url(http://www.hdiphone6wallpapers.net/iphone-6-backgrounds/iphone-6-wallpapers-2/iphone-6-wallpapers-hd-100pb94q-1080x1920.jpg) no-repeat;
}
.parallax__layer--slow {
  transform: translateZ(-4px) scale(4);
  background: url(http://1.bp.blogspot.com/-ZRDN2sugdrg/UXa1qeFfjYI/AAAAAAAAVjo/1m10L-jCIgo/s1600/starcraft_2_render7E0.png) no-repeat center;
  background-size: 100%;
}

* {
  margin: 0;
  padding: 0;
}

.parallax {
  font-size: 16px;
}

.parallax__layer {
  padding: 75vh 0;
}

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
  </div>
  <div class="parallax__layer parallax__layer--slow">
  </div>
  <div class="parallax__layer parallax__layer--base">
  </div>
</div>

要控制每个图层的滚动速度，请更改translateZ和scale属性。