以下是细分。。。
- 包装器(位置:相对;溢出:隐藏;)
- 截面容器(位置:绝对)
- 多个子部分
- 截面容器(位置:绝对)
我附加了一个鼠标滚轮事件侦听器,并对"section container"的"top"位置进行动画处理(轻松处理)。随着此位置的变化,每个节的"背景位置"会根据"节容器"的"顶部"属性的位置垂直移动(通过setTimeout()不断更新)。
所有这些都正常工作,除了"背景位置"发生变化,图像会有点抖动。如果"后台附件"设置为"已修复",则不会发生这种情况。。。但我不想那样。
有人能解释一下吗?我经常提到https://victoriabeckham.landrover.com/网站,无法弄清楚他们正在做什么不同的事情来让他们的运营如此高效。
你可以看看这一点,我相信这是他们制作大部分动画的地方:https://victoriabeckham.landrover.com/js/ScrollAnimator.js?v=471
我不得不说,他们有某种框架可以用来实现这一点。
编辑:很抱歉没有看到我上面的新答案,这似乎是一个很好的起点。
-Ken
如果你仔细检查这个网站,你将能够像使用landrover网站一样使用它。
您需要使用:scrollTo插件和视差插件
文档jQuery应该是这样的:
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#intro').parallax("50%", 0.1);
$('#second').parallax("50%", 0.1);
$('.bg').parallax("50%", 0.4);
$('#third').parallax("50%", 0.3);
});
好的。所以我发现我的问题是在尝试对"top"属性上的"section container"设置动画()时。我使用了一个"+="来允许它从当前位置递增。使用"mousewheel"事件时不是一个好主意。我把它改成了一个不断递增/递减的硬集变量。