Javascript 如何获得视差的核心部分（这就是关键所在）？

我试着用视差做实验，从零开始理解这个魔法的核心部分。给你一个我喜欢用作灵感的例子，你可以在“照片”部分看到

最新代码在页面下方，包含相关信息。要全面了解问题，请查看其余细节。

我已经知道的核心部分是

$window

的

scrollTop（）

和元素的

offsetTop

对于在DOM元素上应用视差效果以及

因子

对于效果响应滚动速度的敏感度非常重要。最终结果应该是计算

translateY

或

translate3d

坐标（以像素或百分比为单位）的公式

我在互联网上读到CSS属性

translate

比

top

from

position:absolute

更快，我更喜欢结合使用translate。所以视差的移动会非常平滑。但是如果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...

  });
});

所以我有上面的代码，但它没有做任何事情，当然。它只会在控制台上记录

scrollTop

和

offsetTop

。如前所述，我只知道应用视差效果的核心部分，如

scrollTop

和

offsetTop

。然后，应该会创建一些区域，在这些区域中会触发并发生视差效果，因此将仅对视口中的元素进行计算，以保持良好的性能。在那之后，应该做一些数学计算，但不知道具体是什么或如何实现这一点。只有在我有了一个最终的数字后，我才能在Greensock中使用它，例如

TweenMax

，如下所示：

TweenMax

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

视差公式

如果我环顾四周，想把公式写下来，我会得出这样的结论（建立在互联网上）：

经过一些很好的调试，我想我已经找到了线索。所以

scrollTop

是您在页面上向下滚动并从视图中隐藏的像素量

offsetTop

是元素在DOM和

$（窗口）中的起始位置。height

是视口高度-浏览器中可见的部分

这就是我认为这个公式的作用：

将零点设置为元素开始的点。例如，当

scrollTop

等于0且元素从顶部开始的

240px

时，公式为：0减去240即

-240

。因此，当前滚动位置低于零点。向下滚动240px后，公式将输出0，因为240减去240当然是

0

（零）。我说得对吗

但我还不明白的是为什么

+win.height

。 如果我们回到上面的公式（在更新2时），scrollTop为零，那么

$（窗口）。height

是从240px到视口底部的空间。向下滚动时，滚动上的像素量会增加，这对我来说毫无意义。如果有人能解释这可能是为了什么，那就好了。”我很好奇。计算视差的公式的第二部分我还是不明白。通常，计算涡旋上的视差强度

更新3/4

在@Edisoni的建议下，我在过去的几天里走了几步，在视差的基本功能上我变得聪明多了。对于每个想在视差中挖掘的人来说都是必须的。我使用了关于视差的新知识来完成上述脚本工作：

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;
            }

        });

    });

}

我应该使用

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，零点将重置为每个元素的偏移量，我说的对吗

为什么我的代码只适用于前两个元素？如果将

translate

的内联样式添加到动画元素中，为什么它们会向下跳一些像素？有关所有信息，请参见更新3/4

---

视差实际上在原理上非常简单。只需使视差元素的滚动速度慢于其他内容。也就是说，视差实现可以简单到将滚动距离除以一个因子：

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);

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

长命百岁

更新：

此示例仅适用于屏幕顶部的元素。如果这是为了更一般的目的，那么您可能希望存储元素的默认y位置，然后是沿着

defaultYCord+（document.body.scrollTop/parallaxFactor）

行的内容

更新2:

一个非常好的视差可视化来自Keith Clark，他做了一个p

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

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

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);

function parallaxingY(el){
   //el is a parallaxing element with attribute data-z
   return $(el).data('z')*window.scrollTop;
}