html5頁面滾動圖片視差滾動效果



95 379 127



特效描述: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

加群請備注:從官網了解到

老夫子电子