跳跃元素

Question

我正在创建一个视差效果，并且我已经做到了，这样(几乎)每个元素都有不同的滚动速度。

我也这样做了，这样页面下的元素在到达视口之前不会触发它们的滚动速度。

以下是trigger上触发器命令的JS：

function isElementInViewport (el) {

  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }

  var rect = el.getBoundingClientRect();

  return (
    rect.bottom >= 0 &&
    rect.left >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
  );
}

我的滚动速度代码是：

$(window).scroll(function(){
  var wScroll = $(this).scrollTop();

  if (isElementInViewport($('#computer'))) {
    $('#computer').css({
      transform' : 'translate(0px, '+ wScroll /12 +'%)'
    });
  }

或者对于已经在页面顶部的元素：

$(window).scroll(function(){
  var wScroll = $(this).scrollTop();

  $('#shape-2').css({
    'transform' : 'translate(0px, -'+ wScroll /8 +'%)'
  });

这里的问题是，当我将函数isElementInViewport添加到滚动速度时。

它使元素在显示时跳出视图，然后按我想要的方式滚动。

因此，它与页面的布局不相称。

我试着通过改变元素的位置来补偿它，这样当元素显示出来时，它会跳到原来的位置，然后开始滚动，但事实证明这没有什么帮助，因为不同的屏幕大小和分辨率导致位置不同。

有没有办法让它在暴露的时候不会跳起来？

Answer 1

确保您的基本CSS声明了一个零的转换转换，或者在元素出现之前从脚本中添加它；稍后添加属性可能会导致跳转。