滚动视觉差效果代码

一款比较大气滚动视觉差效果代码，主要通过检测鼠标的滚动事件，实现多图层之间的位置变化，值得参考学习一下。

分类：图片代码 > 图片滚动难易：入门级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

开头引入CSS样式和jquery库：

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

body部分写好多图片层的容器，代码如下：

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

底部写好滚动事件的功能，并在页面载入时运行：

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();