元素可见时 跟随鼠标滚动产生的视差效果 代码如下:
<div class="set9 clearfix" style="padding: 500px 0; height:2000px;">
<div class="dropa" style="width: 100px;height:100px;background-color: #ccc; float: left;margin-right: 200px;position: initial; transition:margin-top .5s; margin-top: 0;" ></div>
<div class="dropb" style="width: 100px;height:100px;background-color: #666; float: left;margin-right: 200px;position: initial; transition:margin-top .5s;margin-top: 40px;"></div>
<div class="dropc" style="width: 100px;height:100px;background-color: #999;float: left;margin-right: 200px;position: initial;transition:margin-top .2s;margin-top: 80px; "></div>
</div>
<script type="text/javascript">
$(window).scroll(function() {
var Topa = $(".dropa").offset().top- $(window).scrollTop(); //元素距离顶部距离
var Topb = $(".dropb").offset().top- $(window).scrollTop(); //元素距离顶部距离
var Topc = $(".dropc").offset().top- $(window).scrollTop(); //元素距离顶部距离
console.log(Topa,Topb,Topc);
if(Topb < 600){
$(".dropb").css('margin-top', Topb*0.15+'px');//滚动时的视差效果
console.log()
}
if(Topc < 600){
$(".dropc").css('margin-top', Topc*0.25+'px');
console.log()
}
})
</script>
可根据需求自行修改