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

Question

我试图尝试视差并从头开始了解这个魔法的核心部分.为了给你一个我喜欢用作灵感的例子,你可以在这个链接的"照片"部分看到它.

最新代码在页面下方,包含相关信息.要全面了解问题,请参阅其余详细信息.

核心部分我已经知道是scrollTop()的$window和offsetTop元素都是重要的应用DOM元素上的视差效果,以及一factor对多么敏感效果应该滚动速度来做出回应.最终结果应该是一些以像素或百分比计算translateY或translate3d坐标的公式.

我读了CSS属性在互联网上translate比速度更快,例如,top从position: absolute和我的偏好也将是用翻译与组合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...

  });
});

所以我在代码上面编码,但它当然没有做任何事情.请参阅上面的代码中的CodePen.它只会控制日志scrollTop和offsetTop.如前所述,我只知道核心部分scrollTop和offsetTop应用视差效果.然后应该创建一些区域,其中视差效果将被触发并发生,因此仅对视口内的元素进行计算以保持良好的性能.在那之后应该有一些数学,但不知道究竟是什么或如何实现这一点.只有在我有一个最终号码后,我才可以在TweenMaxGreensock中使用它,如下所示:

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

经过一些很好的调试后,我认为我已经有了线索.scrollTop您向下滚动页面并从视图中隐藏的像素数也是如此.offsetTop是DOM中元素的起始位置,$(window).height是视口高度 - 浏览器中可见的部分 - .

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

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

但我不理解的部分是原因+ win.height.如果我们回到上面的公式(在Update 2)并且scrollTop为零,则$(window).height是从240px到视口底部的空间.向下滚动时,像素数量会在滚动时增长,这对我来说毫无意义.如果有人可以解释本来可能的目的就没问题.我很好奇.计算视差公式的第二部分offsetPercent我还是不明白.一般来说,滚动时视差强度的计算.

更新3/4

在@Edisoni的建议下,我最近几天走过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;
            }

        });

    });

}

但是,该脚本仅适用于某些元素,并希望有人可以帮助我.问题是它只适用于前两个元素.我怀疑"错误"特别位于&&if语句中的AND 符号之后,但无法解决错误.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:

1. 如何计算视差y坐标以完成"神奇"？
2. 我对更新2是否正确,零点将被重置为每个元素的offsetTop？
3. 为什么我的代码仅适用于前两个元素以及为什么如果将内联样式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);

密码笔

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

健康长寿·繁荣昌盛。

更新：

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

更新2：

一个非常好的视差可视化来自 Keith Clark，他制作了一个纯 css 视差滚动器：http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/。如果您单击左上角的“调试”，它会给您一个漂亮的 3D 魔术视图。