上下滑动的常见视差效果

元素可见时  跟随鼠标滚动产生的视差效果  代码如下：

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

可根据需求自行修改