html5页面滚动图片视差滚动效果



90 357 120



特效描述:html5 页面滚动 图片视差滚动,html5图片视差效果

代码结构

1. HTML代码

<div class="keyart" id="parallax">
  <div class="keyart_layer parallax" id="keyart-0" data-speed="2"></div>
  <!-- 00.0 -->
  <div class="keyart_layer parallax" id="keyart-1" data-speed="5"></div>
  <!-- 12.5 -->
  <div class="keyart_layer parallax" id="keyart-2" data-speed="11"></div>
  <!-- 25.0 -->
  <div class="keyart_layer parallax" id="keyart-3" data-speed="16"></div>
  <!-- 37.5 -->
  <div class="keyart_layer parallax" id="keyart-4" data-speed="26"></div>
  <!-- 50.0 -->
  <div class="keyart_layer parallax" id="keyart-5" data-speed="36"></div>
  <!-- 62.5 -->
  <div class="keyart_layer parallax" id="keyart-6" data-speed="49"></div>
  <!-- 75.0 -->
  <div class="keyart_layer" id="keyart-scrim"></div>
  <div class="keyart_layer parallax" id="keyart-7" data-speed="69"></div>
  <!-- 87.5 -->
  <div class="keyart_layer" id="keyart-8" data-speed="100"></div>
  <!-- 100. -->
</div>
<script>
function castParallax() {
  var opThresh = 350;
  var opFactor = 750;
  window.addEventListener("scroll", function(event) {
    var top = this.pageYOffset;
    var layers = document.getElementsByClassName("parallax");
    var layer, speed, yPos;
    for (var i = 0; i < layers.length; i++) {
      layer = layers[i];
      speed = layer.getAttribute('data-speed');
      var yPos = -(top * speed / 100);
      layer.setAttribute('style', 'transform: translate3d(0px, ' + yPos + 'px, 0px)');
    }
  });
}
document.body.onload = castParallax();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 自动滚动图片轮播 滑动星星打分 其他 全屏滚动 多功能 多功能插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到