我尝试用视差进行实验，并从头开始了解这个魔法的核心部分。为了给你一个我喜欢用作灵感的例子，你可以在＆＃34;照片＆＃34;中看到它at this link here。部分。
最新代码在页面下方，包含相关信息。要全面了解问题，请参阅其余详细信息。
我已经知道的核心部分是scrollTop()的{{1}}，元素的$window对于在DOM元素上应用视差效果以及{{1}非常重要对于效果响应滚动速度的敏感程度。最终结果应该是一些计算offsetTop或factor坐标（以像素为单位）或百分比的公式。
我在互联网上看到CSS属性translateY比translate3d中的translate更快，我也倾向于将翻译与{{{}}结合使用3}}。因此，视差的运动将非常平滑。但是，如果只有css属性top就足够了，那也很好。我看到了一些使用TweenMax的例子，这就是我现在使用它的原因。
JS
我有基本的代码：
position: absolute所以我在代码上面编码，但当然它没有做任何事情。 TweenMax GSAP。它只会控制日志translate和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范围内使用它，如下所示：
TweenMax
offsetTop视差公式
如果我四处寻找公式，我就会发现这样的事情（建立在互联网上）：
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()的功能对我来说很清楚，但公式背后的诀窍是，我不了解的部分。
更新1
@Scott已经通知灵感网站使用名为See CodePen from above code here的插件，但我非常好奇我如何在不使用插件的情况下自己创建视差。它是如何工作的以及如何实现它。强调公式，为什么我应该这样或那样做以及究竟将要计算什么，因为我不理解它并且真的想知道这一点，以便我在将来应用时可以使用这些知识视差效应。更新2
最后一天，我试图找出以下代码段的确切功能。我在谈论这个：
offsetTop经过一些很好的调试后，我认为我已经找到了线索。因此$(window).height()是您向下滚动页面并从视图中隐藏的像素数量。 var viewportOffset = scrollTop - offsetTop + win.height();
是DOM中元素的起始位置，scrollTop是视口高度 - 浏览器中可见的部分 - 。
这就是我认为这个公式的作用：
将零点设置为元素开始的点。例如，当offsetTop等于0且元素从顶部开始于$(window).height时，则公式为：0减去240为scrollTop。因此当前滚动位置低于零点。向下滚动240px后，公式将输出0，因为当然240减去240是240px（零）。我是对的吗？
但我不了解的部分是为什么-240。
如果我们回到上面的公式（在Update 2）并且scrollTop为零，则0是从240px到视口底部的空间。向下滚动时，像素数量会在滚动时增长，这对我来说毫无意义。如果有人可以解释本来可能的目的就没问题。非常好奇。计算视差的公式的第二部分+ win.height我还是不明白。一般来说，滚动时视差强度的计算。
更新3/4
@Edisoni建议，我走了最后几天scrollmagic.io，我已经变得更加明智了视差的基本功能。每个想要挖掘视差的人都必须这样做。我已经使用了关于视差的新知识来使我的上述脚本工作：
$(window).height但是，该脚本仅适用于某些元素，并希望有人可以帮助我。问题是它只适用于前两个元素。我怀疑＆＃34;错误＆＃34;尤其位于if语句中的AND offsetPercent之后，但无法解决错误。 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;
}
});
});
}
。所以它不是从0％开始。我已经检查过是否应该将CSS属性&&添加到CSS并将数字类型设置为1.135%，但这对我不起作用。
translate我应该使用% -webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
功能而不是使用TweenMax功能，这样我也可以设置起始位置，或者我对这个错误的看法有不同的原因？
这样的事情：
.fromTo()除了我试图重新创建我想用作灵感源的网站的效果而不使用scrollMagic插件，但我不知道这是如何工作的，使用两个不同的动画的对象。
最后，如果有人认为代码可以更好地格式化，请不要犹豫，我想听听您的建议
我的实际问题是针对更新2和3/4：
.to()的内联样式添加到动画元素中，它们会向下跳一些像素？有关所有信息，请参阅更新3/4。答案 0 :(得分：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，他制作了一个纯粹的css视差卷轴：http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/。如果你单击左上角的调试，它会为你提供一个很棒的魔术三维视图。
答案 1 :(得分：0)
这不是如何在JS中构建视差的答案。但它显示了一些基础知识，如果你对代码的了解过多，这些基础知识往往会被遗忘。
如何计算视差y坐标以完成“神奇”？
y位置取决于您的z-index。如果它远离a.k.a，则z-index为低，delta-y很小。如果它也在你附近，delta-y很大。 请考虑z-index不一定用作Style-property，它更像是它的外观。 我会在每个parallaxing层添加一个像data-z这样的属性。
function parallaxingY(el){
//el is a parallaxing element with attribute data-z
return $(el).data('z')*window.scrollTop;
}
建议的CSS-Solution很好，应该是首选。在那里，“魔术” - “z指数” - 由css风格的“比例”制作。