Question

我正在制作基于滚动的视差。

我想实现元素仅在其进入视口后才开始移动，并且移动基于上下滚动，例如标准的视差行为。

I started with this ，但是这并不能像预期的那样工作，因为当我滚动到.wrap时，视差元素已经移动了很多，我需要它们在{{1 }}到达视口。

这是我尝试过的。在视口中可见.wrap顶部之后，我使函数启动。那行得通，但问题是，在 .wrap 变得可见之后，立即为整个文档计算了基于滚动的位置，视差元素跳到了顶部。

我需要的是从“ .wrap”开头开始计算滚动，或者在可见.wrap时基于od文档滚动。

.wrap

var element = $(".wrap");
var topOfElement = element.offset().top;
var bottomOfElement = element.offset().top + element.outerHeight(true);
var $window = $(window);

$window.bind('scroll', function() {
  var scrollTopPosition = $window.scrollTop() + $window.height();
  var windowScrollTop = $window.scrollTop()

  if (windowScrollTop > topOfElement && windowScrollTop < bottomOfElement) {
    // Element is partially visible (above viewable area)

  } else if (windowScrollTop > bottomOfElement && windowScrollTop > topOfElement) {
    // Element is hidden (above viewable area)
    console.log("Element is hidden (above viewable area)");

  } else if (scrollTopPosition < topOfElement && scrollTopPosition < bottomOfElement) {
    // Element is hidden (below viewable area)
    console.log("Element is hidden (below viewable area)");

  } else if (scrollTopPosition < bottomOfElement && scrollTopPosition > topOfElement) {
    // Element is partially visible (below viewable area)
    console.log(0.8 * scrollY);

    TweenMax.set(".scroll-parallax-1", { y: 0.1 * -scrollY });
    TweenMax.set(".scroll-parallax-2", { y: 0.2 * -scrollY });
    TweenMax.set(".scroll-parallax-3", { y: 0.4 * -scrollY });
    TweenMax.set(".scroll-parallax-4", { y: 0.7 * -scrollY });
    TweenMax.set(".scroll-parallax-5", { y: 1.2 * -scrollY });
  } else {
    // Element is completely visible
    console.log("Element is completely visible");
  }
});

.asd {
  width: 800px;
  height: 2000px;
  position: relative;
  background: #000;
  opacity: 0.3;
  left: 50px;
}

.wrap {
  width: 800px;
  height: 800px;
  background: #111;
}

.a {
  width: 100px;
  height: 100px;
  position: relative;
  background: #f50;
  opacity: 0.5;
  left: 50px;
}

.b {
  width: 100px;
  height: 100px;
  position: relative;
  background: #f80;
  opacity: 0.5;
  left: 50px;
}

.c {
  width: 100px;
  height: 100px;
  position: relative;
  background: #ccc;
  opacity: 0.5;
  left: 50px;
}

.d {
  width: 100px;
  height: 100px;
  position: relative;
  background: #f10;
  opacity: 0.5;
  left: 50px;
}

.e {
  width: 100px;
  height: 100px;
  position: relative;
  background: #d50;
  opacity: 0.5;
  left: 50px;
}

这是codepen.io上托管的摘要的镜像。

我正在使用jQuery和TweenMax。

我还尝试了Intersection观察器，但是只计算元素的交集，而不是在元素完全位于视口中时计算。

任何想法如何实现？还是一些类似的视差？ -我过去几天一直在寻找解决方案，找不到类似的东西。

计算特定元素而不是整个文档在窗口中的滚动位置

0 个答案: