一款比较大气滚动视觉差效果代码,主要通过检测鼠标的滚动事件,实现多图层之间的位置变化,值得参考学习一下。
开头引入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();
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791