仅在视图中时元素位置上的视差效果

Question

类似于这个未解决的问题 (jQuery - parallax - update background position correctly)

我正在为页面滚动上的元素的变换属性设置动画，以实现类似视差的效果。我希望这个元素只有在它出现时才开始动画。现在的问题是，如果元素出现在页面的下方，它已经向上移动了很多并且失去了效果。

这是我目前的代码

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，在其中发生移动（就像一个 bg 在 div 包装器中移动）。

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

div 的高度更大，我们检查这个 div 何时在屏幕上，而不是移动的元素。

demo

如果需要不同的速度，也可以应用其他修改，每个元素的偏移量。我发现这个plugin 是一个很好的初学者学习视差的东西。

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