jquery - scrollmagic/greensock .to 即使没有发生滚动也会影响初始位置

标签 jquery css scrollmagic

我正在尝试按照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 onLeave0 0.51,但逻辑上它可以是之间的任何数字。

将其设置为0.1就可以了。直到用户开始滚动时场景才会启动,因此所有元素都会在页面加载时显示在正确的位置。

这在scrollmagic示例中不是很清楚,所以我希望我的回答对其他人有帮助。

关于jquery - scrollmagic/greensock .to 即使没有发生滚动也会影响初始位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41757000/

相关文章:

javascript - ScrollMagic:当内容与固定区域重叠时隐藏内容

jquery - 如何延迟显示 html 文本,直到加载背景图像 Sprite ?

window - 带有 scrollmagic 的 Nuxtjs 给了我 "window is not defined"

javascript - 没有填充的 ScrollMagic 持续时间

javascript - jquery-ui-1.8.2.custom.min.js 主题之间的区别

html - 将标题与图像对齐

html - 在 <frameset> 问题中启用链接

javascript - 使用 jQuery 将 HTML 文本抓取为 JSON,但由于循环引用而无法进行字符串化

元素子元素的 JQuery 触发事件

php - jQuery ajax 在发布多个数据时不返回任何内容