Question

与此未解决的问题类似（jQuery - parallax - update background position correctly）

我正在动画页面滚动上元素的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在屏幕上的时间，而不是移动元素。

<强> demo

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

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

仅在视野中对元素位置的视差效果

1 个答案: