Parallax effect with CSS transition

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/33964391/parallax-effect-with-css-transition

标签

html

css

css3

css-transitions

parallax