注册 登录 充值会员 退出
毕业设计 PHP源码
充值

HTML5网站页面滚动视差效果特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-04-06
HTML5网站页面滚动视差效果特效
HTML5网站页面滚动视差效果特效是一款鼠标滚动页面带有视差切换显示效果代码。


js代码

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