我正在尝试按照scrollmagic示例实现视差滚动。
greensock 文档说,像 TimelineMax.to
这样的东西定义了该场景中元素的最终位置(而不是定义初始位置的 .from
)。
但是我发现 .to
实际上会立即影响初始位置,特别是当页面加载时该元素位于视口(viewport)的顶部时。
例如:
.to($('.intro-header .bcg'), 3, {y: "80%",rotation:0.01, ease:Linear.easeNone});
将放置我的元素 .intro-header .bcg
在页面加载时已经处于 40% 的位置,并且没有发生滚动!
我已经绞尽脑汁好几天了,但我不明白为什么会发生这种情况。
只有当我将场景的持续时间设置为 1200% 之类的值时,元素才会在页面加载时显示在正确的初始位置,但场景发生的速度会非常慢。
最佳答案
我发现问题不在于场景持续时间,而在于 triggerHook
参数。
关于这个Scene参数的信息并不多on Scroll Magic ,但我的 triggerHook
被设置为 onEnter
...
我错误地认为该值只能是 onEnter
onCenter
onLeave
或 0
0.5
和 1
,但逻辑上它可以是之间的任何数字。
将其设置为0.1
就可以了。直到用户开始滚动时场景才会启动,因此所有元素都会在页面加载时显示在正确的位置。
这在scrollmagic示例中不是很清楚,所以我希望我的回答对其他人有帮助。
关于jquery - scrollmagic/greensock .to 即使没有发生滚动也会影响初始位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41757000/