问题标签 [scrollmagic]

我想在 iFrame 中使用Scrollmagic。有没有办法使这项工作？

示例： http ://raet.boldinteractive.nl/staging/iframe.html

第 4 部分有一个触发器（见指标）

我正在使用 ScrollMagic 在本教程之后进行视差部分滚动。我让它在视觉上工作，但现在使用鼠标滚轮或触控板时页面已停止滚动。它滚动的唯一方法是拖动右侧的滚动条。

main.css

索引.html

scroll_magic.js

这一切都遵循他们的教程，效果很好。显然我做错了什么，但我不知道是什么。该问题在 Chrome 和 Firefox 中都存在。

感谢您的任何建议！

编辑

有人向我指出，控制台中有一些我没有注意到的错误日志记录。页面加载时产生的所有错误本质上都是调试错误，我可以接受。但是，当我尝试用鼠标滚轮滚动页面时，突然间，这个错误开始产生数百次：

未捕获的类型错误：无法在“窗口”上执行“滚动到”：需要 2 个参数，但只有 0 个存在。

它的来源是TweenMax.min.js:16

对此进行了一些研究，发现了一些帖子。看起来我缺少一个 GreenSock 插件，但我认为我的脚本标签应该已经选择了它。我已经尝试了很多方法来获取这个插件，但没有任何效果。例如，我尝试添加这一行：

有谁知道我如何将此插件包含到我的项目中？我强烈希望使用外部引用而不是将整个项目复制到我的服务器上。

当用户向下滚动页面时，我想隐藏我的网站标题（在 ScrollMagic 中很简单） - 但我不确定我是否也可以使用 ScrollMagic 来检测用户是否向上滚动，如果是这样再次显示标题。

棘手的部分是，对于初始向下滚动，我可以为主站点包装器设置一个简单的偏移量，但是对于页面滚动期间可能发生的任何时间点的 scollup，我不确定如何使用 ScrollMagic 的事件来实现这一点？

任何帮助表示赞赏。

担

我正在尝试使用 scrollmagic 插件实现 SVG 文本滚动，例如：

http://janpaepke.github.io/ScrollMagic/examples/advanced/svg_drawing.html

但是，当我从此处获取示例代码并将其合并到我的站点中时，SVG 动画可以正常工作，但是 svg 动画是同时发生的，而不是与窗口滚动的 1:1 关系。

我认为必须有某种场景或控制器属性必须启用此功能？这是我用于此的特定代码，从我的项目中裁剪出来：

的HTML：

JS：

我会再次说这是从更大的项目中裁剪出来的，所以如果有什么遗漏，请先在评论中问我，我会更新帖子。

谢谢您的帮助。

我刚开始尝试弄清楚 GSAP 和 ScrollMagic 是如何协同工作的，当我在这个很酷的指南站点中跟进源代码时：http ://scrollmagic.io/examples/basic/simple_velocity.html ，它在我的密码笔。

这是我打算在黑线到达窗口顶部后放大“scene2”：http: //codepen.io/anon/pen/xZxZXm

这就是我的 js 的样子：

和html如下：

我在滚动时使用 scrollmagic 来补间 svg 剪辑路径。通常使用 svgs（或 div 或部分或其他），您在 html 中指定的最后一件事在 z-index 方面位于顶部，但您在 css 中更改它。我试图用我的 svgs 来做到这一点，这样当第一个 svg 补间时，另一个在它后面向上滚动。似乎 scrollmagic 正在阻止我的 z-indexing 工作。有任何想法吗？

http://codepen.io/kathryncrawford/pen/BoXOMJ

CSS

我只是想在我的索引页面上使用滚动魔术创建一个基本的 2 层视差效果，它下面有一个巨大的图像和内容。我多次查看文档和源代码，但它似乎不起作用，我不知道我错过了什么：

html:

CSS：

视差.js：

首先，我是 GSAP 和 ScrollMagic 的新手，如果我在这里问了一个愚蠢的问题，请原谅我。我一直在寻找互联网，但没有成功找到我的问题的正确答案。

无论如何，我正在尝试创建一个时间线，在每个“to”函数的完成上，将使用特定参数调用外部函数。

这里发生了什么：一旦滚动位置到达'#trigger-event'，时间线将被调用。随后，将根据触发事件之后和结束（持续时间）之前的滚动位置调用“.to”函数。

我在这里面临的问题是 onComplete 函数是在页面加载时直接调用的。这可能与“.setTween(timeline)”有关，我可以想象它会加载到整个时间线中。

我的问题的解决方案是什么，或者什么是好的替代方法？

编辑：这是一个 JSFiddle：https ://jsfiddle.net/04db5ja5/

谢谢你， 恩齐奥

我想要一个全屏（宽度/高度）面板在用户垂直滚动时水平（视差）动画。我正在尝试使用基本部分幻灯片示例，但无法使其正常工作。我这里有一把小提琴。https://jsfiddle.net/69dz7tav/

它立即运行时间轴动画而不是滚动。我错过了什么？

我正在使用此处找到的 ScrollMagic 插件。我在尝试跨多个屏幕尺寸固定对象时遇到问题。问题是我在引脚的“持续时间”属性中进行硬编码，但持续时间设置为像素。而且由于像素因您使用的设备而异，因此会引起问题。这是我当前的代码：

这实际上很容易设置。现在，我真正想做的是这样的：

这个插件可以实现吗？是否有捷径可寻？我在文档中没有看到任何关于它的内容。