javascript - 如何获得视差的核心部分 - 这就是诀窍 - 工作？

Question

我试着用视差做实验，从头开始理解这个魔法的核心部分。举个我喜欢作为灵感的例子，你可以看看at this link here在“照片”部分。

最新代码位于页面下方，提供相关信息。要全面了解问题，请参阅其余详细信息。

我已经知道的核心部件是 scrollTop()的$window和 offsetTop元素对于将视差效果应用于 DOM 元素以及 factor 很重要。效果应该如何响应滚动速度。最终结果应该是一些可以计算 translateY 的公式。或 translate3d以像素或百分比为单位的坐标。

我在互联网上读到 CSS 属性 translate比例如 top 快来自 position: absolute ，我更喜欢将 translate 与 TweenMax GSAP 结合使用.所以视差的运动会非常流畅。但如果只有 css 属性 translate够了也行。我看到了一些使用 TweenMax 的例子，这就是我现在使用它的原因。

JS

我对基本的东西进行了编码:

var win = $(window);
var el = $('#daily .entry').find('figure');

win.scroll(function() {
  var scrollTop = win.scrollTop();
  var parallaxFactor = 5;

  el.each(function() {
    var image = $(this).find('img');
    var offsetTop = $(this).offset().top;

    // This is the part where I am talking about. 
    // Here should be the magic happen...

  });
});

所以我在代码上面写了代码，但它当然没有做任何事情。 See CodePen from above code here .它只会控制台日志 scrollTop和 offsetTop .如前所述，我只知道核心部分，如 scrollTop和 offsetTop应用视差效果。然后应该创建一些将触发和发生视差效果的区域，因此将仅对视口(viewport)内的元素进行计算以保持良好的性能。之后应该做一些数学运算，但不知道究竟是什么或如何实现这一点。只有在我有了最终号码后，我才能在例如 TweenMax 内使用它来自 Greensock 像这样:

TweenMax

TweenMax.to(image, 0.1, {
    yPercent: offsetPercent + '%',
    ease: Linear.easeNone
});

视差公式

如果我环顾四周以得到公式，我会发现这样的事情(在互联网上建立):

var viewportOffset = scrollTop - offsetTop + win.height();
var offsetPercent = ((viewportOffset / win.height() * 100) - 100) / parallaxFactor;

if (viewportOffset >= 0 && viewportOffset <= win.height() * 2) {
    TweenMax.to(image, 0.1, {
        yPercent: offsetPercent + '%',
        ease: Linear.easeNone
    });
}

但老实说，我不知道这到底是做什么的，或者为什么应该/可能是这样。我想知道这个，所以我可以理解产生视差的整个过程。 scrollTop()的功能, offsetTop和 $(window).height()对我来说很清楚，但公式背后的技巧是什么，是我不明白的部分。

更新

更新 1

@Scott 已通知灵感网站使用名为 scrollmagic.io 的插件。 ，但我很好奇如何在不使用插件的情况下自己创建视差。它是如何工作的以及如何实现它。重点是公式，为什么我应该这样做或那样做以及究竟会计算什么，因为我不理解它并且很想知道这一点，以便我将来在应用视差效果时可以使用这些知识.

更新 2

我试图弄清楚以下代码片段究竟做了什么。我说的是这个:

var viewportOffset = scrollTop - offsetTop + win.height();

经过一些良好的调试 session 后，我认为我掌握了线索。所以 scrollTop是您向下滚动页面并从 View 中隐藏的像素数量。 offsetTop是元素在 DOM 中的起始位置和 $(window).height是视口(viewport)高度 - 在浏览器中可见的部分 -。

这就是我认为这个公式所做的:

将零点设置为元素开始的点。例如，当 scrollTop等于 0 并且元素从 240px 开始从上往下，则公式为: 0 减 240 是 -240 .所以当前滚动位置低于零点。向下滚动 240px 后，公式将输出 0，因为当然 240 减去 240 是 0 (零)。我对吗？

但我还不明白的部分是为什么 + win.height .
如果我们回到上面的公式(在更新 2 处)并且 scrollTop 为零，那么 $(window).height是从 240px 到视口(viewport)底部的空间。向下滚动时，像素数量会随着滚动而增长，这对我来说毫无意义。如果有人能解释一下这可能是什么目的就好了。很好奇。第二部分计算视差的公式 offsetPercent我还是不明白。通常计算滚动上的视差强度。

更新 3/4

在@Edisoni 的建议下，我最近几天走了 by the videos of Travis Neilson我对视差的基本功能变得更加明智。每个想要挖掘视差的人都必须这样做。我使用了关于视差的新知识来使我的上述脚本工作:

var root = this;
var win = $(window);
var offset = 0;

var elements = $('#daily .entry figure');

if (win.width() >= 768) {
    win.scroll(function() {

        // Get current scroll position
        var scrollPos = win.scrollTop();
        console.log(scrollPos);

        elements.each(function(i) {
            var elem = $(this);
            var triggerElement = elem.offset().top;
            var elemHeight = elem.height();
            var animElem = elem.find('img');

            if (scrollPos > triggerElement - (elemHeight / 2) && scrollPos < triggerElement + elemHeight + (elemHeight / 2)) {
                // Do the magic
                TweenMax.to(animElem, 0.1, {
                    yPercent: -(scrollPos - elemHeight / 2) / 100, 
                    ease: Linear.easeNone
                });

            } else {
                return false;
            }

        });

    });

}

但是，该脚本仅适用于元素的特定部分。问题是它只适用于前两个元素。我怀疑“错误”特别位于 AND && 之后登录 if 语句，但无法解决错误。 http://codepen.io/anon/pen/XKwBAB

当在触发器上工作的元素进行动画处理时，它们会跳到底部一些像素，不知道如何解决这个问题。
跳转到: 1.135% , 在触发器被触发后。所以它不是从 0% 开始的。我已经检查过是否应该添加 CSS 属性 translate到 CSS 并将数字类型设置为 % ，但这对我不起作用。

-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);

我应该使用 TweenMax .fromTo()函数而不是使用 .to()功能以便我也可以设置开始位置，还是我的想法是错误的并且有不同的原因？

像这样的东西:

TweenMax.fromTo(animElem, 0.1, {
    yPercent: triggerElement,
    z: 1
}, {
    yPercent: -(scrollPos - elemHeight / 2) / 100,
    ease: Linear.easeNone
});

除此之外，我试图在不使用 scrollMagic 插件的情况下重新创建我想用作灵感来源的站点的效果，但我真的不知道这是如何工作的，使用两个不同的动画对象。

最后，如果有人认为代码可以更好地格式化，请不要犹豫，我想听听您的建议

我的实际问题是针对更新 2 和 3/4:

如何计算视差 y 坐标以完成“魔术”？

我对更新 2 是否正确，零点将被重置为每个元素的 offsetTop？

为什么我的代码只适用于前两个元素，以及如果 translate 的内联样式，为什么它们会向下跳一些像素会被添加到动画元素中吗？有关所有信息，请参阅更新 3/4。

Answer 1

视差实际上在原理上非常简单。只需让视差元素的滚动速度比其余内容慢。话虽如此，视差实现可以像滚动距离除以一个因子一样简单:

var parallaxFactor = 3;
window.addEventListener("scroll", function(e){
    el.style.top = (document.body.scrollTop / parallaxFactor) + "px"; 
    // This is the magic. This positions the element's y-cord based off of the page scroll
}, false);

CODEPEN

这是视差效应的一个极其简单的演示。其他更彻底的实现可以将值处理为百分比，或尝试使用 TweenMax 平滑动画。然而，这就是你正在寻找的魔法。

健康长寿·繁荣昌盛。

更新:

此示例仅适用于屏幕顶部的元素。如果这是出于更通用的目的，您可能希望存储元素的默认 y 位置，然后是类似 defaultYCord + (document.body.scrollTop / parallaxFactor) 的内容。 .

更新 2:

一个非常好的视差可视化来自 Keith Clark，他制作了一个纯 css 视差滚动条: http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/ .如果您单击左上 Angular 的调试，它会为您提供一个很好的魔术 3d View 。