Question

我正在创建一个视差效果，我已经做到了（几乎）每个元素都有不同的滚动速度。
我也做了这样的事情，使得页面中的元素在它们到达视口之前不会触发它们的滚动速度。

这是关于揭示的触发命令的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 +'%)'
    });
  }

对于位于页面顶部的元素的OR：

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

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

这里的问题是当我向滚动速度添加函数isElementInViewport时它会使元素在显示时跳出视图，然后滚动我想要的方式。
所以，它与页面的布局不合适。

我已经尝试通过改变元素的位置来补偿它，这样当它显示它跳转到原始位置然后开始滚动，但这并不是有用的，因为位置因屏幕尺寸和分辨率的不同而不同。 / p>

任何方式我都可以这样做，所以当它被揭示时它不会跳跃？

Answer 1

确保基本CSS声明转换变换为零，或者在元素处于视图之前从脚本中添加它;稍后添加属性可能会导致跳转。

跳跃元素

1 个答案: