Question

对不起我想的这个虚假问题。如果有人知道在这样滚动时让div上下动画的方法，请帮助我：http://velvethammer.net/

你可以看到网站的页脚附近，它有2个部分，每个部分包含2个图像（一个较大，另一个较小，一个在前面而另一个在后面）。我想知道如何制作2个div并使它们在向上和向下滚动网站时有一些上下动画（如parrallax）。

感谢。

Answer 1

我见过的这类问题的大多数解决方案都涉及某种类型的JS并听取用户的滚动事件。

我用JQuery写了一个非常简单的例子。在这里，只要滚动发生，javascript就会监听，并测量滚动页面顶部的距离。然后它将该值与每个图像的不同值相乘，并使用margin-top以不同的速率向下推送图像。

如果图像位于页面的下方，我建议您从与页面顶部不同的位置进行测量。 JS在这里：http://jsfiddle.net/3Lb054qn/

Answer 2

您必须根据滚动更改css位置属性。所以你必须做类似以下的事情。在那个margin-top中改变了第二个div标签。 Javascript代码如下。

<script type="text/javascript">
var lastScrollTop = 0;
$(window).bind('scroll',function(e){
  var st = $(window).scrollTop();
  var cs = $(this).scrollTop();
  var wh = $( window ).height();
  var dv1 = $('#div1').offset().top;
  var dv2 = $('#div2').offset().top;

  var visible_dv1= dv1 - wh;
  //check wether div1 is in the viewport when scroll down
if(st > visible_dv1){
if(cs > lastScrollTop){
    //if scroll down
    $('#div2').css({
    'margin-top': "-=3"
  });
}else{
    //if scroll up
    $('#div2').css({
'margin-top': "+=3"
  });
}
}else{
    $('#div1').removeAttr('style');
    $('#div2').removeAttr('style');
}
  lastScrollTop = cs;
});
</script>

html和css将如下所示。

<style>
.container{width:100%;}
.grid{font-size:22px; width:168px; height:168px; display:block; }
#div1{background:#C30;margin-top:1000px;float:none;position:relative;z-index:1000;}
#div2{background:#6C3;margin-top:-100px;margin-left:50px;float:none;}
</style>
</head>

<body>
<div class="container">
    <div class="grid" id="div1">
        div 1
    </div>
      <div class="grid" id="div2">
        div 2
    </div>
</div>
</body>

使2个div向反方向移动

2 个答案: