CSS过渡的视差效果

zyx4sdk 发表于 Dev

zyx4sdk

可以通过css转换使背景图像产生视差效果吗？视差应该比滚动慢，因此需要做一些减速-是否可以使用CSS做到？否则，如何最好地使用js / jquery？

我关心最佳性能脚本，因为我的网页很少过载。

有人可以告诉或表明如何做吗？我将非常感谢。

桑兹

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属性。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。