视差仅在可见时对元素位置的影响

Question

类似于这个未解决的问题（ jQuery-视差-正确更新背景位置 ）

我正在对页面滚动上的元素的transform属性进行动画处理，以实现类似视差的效果。 我希望此元素仅在可见时才开始动画。 现在的问题是，如果该元素出现在页面的更下方，则它已经向上移动了很多，并且失去了效果。

这是我目前的代码

function parallax() {
  var scrolled = $(window).scrollTop();
  $('[data-scroll]').css('transform', 'translateY('+-(scrolled*0.02)+'px)');
}

$(window).scroll(function(e){
  parallax();
});

Answer 1

在回答您的问题时，如何将“视差” div分开，以便它们在滚动时彼此独立地移动位置，因此应依靠其唯一的坐标-每个坐标都有其自己的$（elem）.offset（）。top -距页面顶部的常规垂直偏移量（除非您手动插入TOP属性，否则它始终保持不变）。

因此所有计算都可以基于此属性。

$('.parallax').each(function(){ 

    if ($(this).is_on_screen()) {
      var firstTop = $(this).offset().top;
      var winScrollTop = $(window).scrollTop();
      var shiftDistance = (firstTop - winScrollTop)*0.02;

      $(this).css("transform":"translateY("+shiftDistance+"px)");
    }
});

另外，还要检查元素是否在视口中。 因此，您可以确保它在自己的时间中移动相同的增量距离，无论它在页面上的什么位置-进一步向下还是向上。

另一件事是如何在屏幕上放置元素可见性的“边界”。 如果在视口中移动元素时，我建议制作一个环绕的div，在其中发生移动（例如，在div包装器中移动的bg）。

<div class="parallax-section slide1">
 <span class="moving-block"></span>
</div>

div的高度较大，我们将检查此div在屏幕上的时间，而不是移动的元素。

演示

如果一个人需要不同的速度，每个元素的偏移量，也可以应用其他修改。 我发现此插件是学习视差的好入门。

PS顺便说一句，所有初始属性都应缓存在变量中，而不是每次在回调中都检索它们，例如，例如firstTop