与CSS转换的视差效果 [英] Parallax effect with CSS transition

问题描述

使用css转换可以制作背景图像的视差效果吗？视差应该比滚动慢，所以需要放慢速度 - 是否可以用css来实现？或者如果没有，如何最好的与js / jquery做到这一点？

我关心最好的表现脚本，因为我的网页很少被重载。

有人可以告诉或说明如何去做？我将非常感激。

解决方案

CSS有一个透视图属性，您可以与 zoom 结合使用，以在其他元素后面或之前获得元素，这些元素将以不同的速度滚动。

这方面有很多资源，@ dwreck08给出的是最好的资源之一： http://keithclark.co.uk/articles/pure-css-parallax-websites/

以下是一个快速复制：

  .parallax {height：100vh; overflow-x：hidden;溢出-y：auto; -webkit-perspective：1px;透视：1px;}。parallax__layer {position：absolute; top：0;左：0;正确：0; bottom：0;}。parallax__layer  -  base {transform：translateZ（0）;白颜色;背景：url（http://cliparts.co/cliparts/pT5/A7L/pT5A7L8T9.png）center no-repeat; background-size：50％auto;}。parallax__layer  -  back {transform：translateZ（-1px）scale（2）;背景：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）;背景：url（http://1.bp.blogspot.com/-ZRDN2sugdrg/UXa1qeFfjYI/AAAAAAAAVjo/1m10L-jCIgo/s1600/starcraft_2_render7E0.png）no-repeat center; background-size：100％;} * {margin：0;我们可以通过下面的例子来说明如何使用parallax：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 和比例属性。

Is it possible to make parallax effect of background image with css transitions? Parallax should be slower than scrolling, so something do slowing is needed - is it possible to do it with css? Or if not, how best to do it with js/jquery?

I care about best performance script, because my webpage is little overloaded.

Could someone tell or show how to do it? I will be very grateful.

解决方案

CSS has a perspective property which you can combine with zoom to achieve an element "behind" or "in front of" other elements which will thus scroll at different speeds.

There are many resources about that, the one that @dwreck08 gave is one of the best: http://keithclark.co.uk/articles/pure-css-parallax-websites/

Here's a quick replication:

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

To control the scroll speed of each layer, change the translateZ and scale properties.

这篇关于与CSS转换的视差效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！