问题标签 [scrollmagic]

我正在使用 Scroll Magic JS。我的目标是拍摄我的 HTML5 视频（如下）并使用 pin 方法使其粘在背景中，同时文本在其顶部滚动。

我的Javascript：

当我不包含 javascript 时，视频可以完美运行（但显然没有固定），当我在图像而不是视频上使用 javascript 时，固定效果很好。

当我在视频中使用 javascript 时，视频仍然出现，并且它固定，但它不播放。有谁知道如何克服这个？

谢谢

我正在尝试创建这种“视差”效果：https ://www.laruchequiditoui.fr/fr （如该.homeSection--collection部分）。

它是一个包含三层的 div，具有滚动透视效果。该网站使用 TweenMax，但对我来说，制作这种效果似乎很沉重。

重新创建这种视差滚动效果的最简单和最轻松的方法是什么？

我试图清理laruchequiditoui.fr示例以仅保留必要的代码：http: //is.gd/r0JNHl

我需要在一个页面上有多个实例，比如laruchequiditoui.frwebsite ；如果可能的话和enter code hereiPad 兼容。

提前致谢 ！

从页面底部加载 jQuery 时，有没有办法使用 ScrollMagic？如果我将 jQuery 放入其中，它会起作用，但如果我不放入则不会。到目前为止，该网站在底部加载的所有脚本都运行良好，我不想改变它，只是为了 ScrollMagic。

将内联 SM 脚本移动到链接的 .js 文件中似乎没有帮助。

各位程序员，您好，我是 HTML5/CSS/Javascript 编程的新手，我会尽量让我的问题尽可能清晰。

我在我的网站上使用了滚动魔法，让导航链接在您向下滚动时滚动到一边。这是该页面的链接。尽管如此，我已经意识到，当我这样做时，当导航链接和我的图像元素（上面有链接区域）处于相同的横向水平时，我不能再单击下面的图像：Scrollmagic 链接移动阻止了其他图像链接。即使导航链接和缩略图链接处于同一级别，我也希望能够在整个视差滚动过程中仍然单击这两个链接。

我试图：更改两个元素的 z 值，更改 .site-nav 和 page-nav 的大小，并花了很多时间尝试编辑零碎的内容，看看是否可以解决问题，但一切都是为了徒劳无功。这是我认为答案所在的部分css，但我可能错了。

用于视差导航链接的 CSS：

图像缩略图链接的 CSS（带有 HR 图像的链接）：

}

因此，如果这听起来对您来说是一个简单的答案，那真的会对我有很大帮助。希望我的帖子是相关的，有意义的！让我知道是否有任何需要澄清的地方。

我不知道为什么我的 svg 不绘图。我的控制台上没有“真正的”错误（“警告：补间被另一个覆盖”在这里不相关）

你可以在这里看到完整的演示：http: //mc-communicate.com/test/svg.html

以下是相关代码：

SVG HTML：

JS：

我正在查看 ScrollMagic 的文档。我看到我可以使用回调函数来更改滚动行为，如下所示：

有没有办法将更多参数传递给这个函数？对于某些特定的链接/锚点，我想使用偏移量。我无法弄清楚如何传递更多参数，或者如何从回调中获取 ScrollTarget。

我正在创建一个长单页网站并使用ScrollMagicJS v1.3.0来触发事件并使某些元素具有粘性。当向下滚动页面时，我想创建各种其他过渡效果。

这是一个复制我网站水平滚动的jsfiddle。

例如，我想在页面之间创建渐变到黑色、耀斑到白色和交叉溶解过渡。

我了解 HTML5 过渡的一些基本原则，如何使一个图像溶解到另一个图像中，但我无法找到一种使用 ScrollMagic 滚动的聪明方法。

我考虑过的事情：下一页在当前页面下滑动，然后使用 ScrollMagic 触发器从 1.0 过渡到 0 不透明度？

但是如何以一种非 hacky 且与 ScrollMagic 的框架一致的方式来做到这一点呢？

这是我网站的大致结构：

我正在使用 ScrollMagic 场景固定我的标题，直到 section2 到达窗口顶部。
为了实现这一点，我将场景的持续时间设置为标题的高度 + section1 的高度。

问题是 ScrollMagic 在我的标题周围创建了一个 div 元素，其填充底部正好是该持续时间。
但我不想要那个填充。我希望标题位于第 1 部分的顶部，一旦我开始滚动，就好像它是固定的一样 - 但直到我到达第 2 部分。此时第 2 部分到达窗口顶部（减去标题高度）我希望场景结束并且标题滚动出来。

事实上，当我将持续时间设置为 0 时，一切正常。但显然，这也让我的标题始终保持在那里，并且在我到达 section2 时不会消失。

我希望这是可以理解的。

这是我的代码：

我正在尝试在我的网站上结合两种不同的操作，并且由于我是 javascript 和 scrollmagic 的初学者，我一直在努力让它们一起工作。我设法使每组操作单独工作。我的代码基于 Jan Paepke 的教程。这是我正在处理的页面的链接：

多个滚动魔术动作网站

1. 当您向下滚动时，第一组操作是向左和向右的补间。
2. 第二组操作只是为了能够从第二个导航链接（page-nav）中的每一个到它们的部分（#tags）进行滚动操作。

在对其进行故障排除时，我注意到使其中一个或另一个单独工作的事情是，如果我包括

<script type="text/javascript" src="js/scrollmagic/ScrollMagic.js"></script>

脚本（包含在 ScrollTo教程中。似乎以前的脚本和 jquery

<script type="text/javascript" src="js/scrollmagic/jquery.scrollmagic.js"></script>

可以这么说，文件正在踩对方的脚趾。如果包含一个而不包含另一个，则该操作将适用于我的 .html。无论如何，我已经为此苦苦挣扎了一段时间，而且我对不同的 jquery.scrollmagic 或 ScrollMagic.js 内部分支还不够熟悉来解决这个问题。

如果您有任何解决方案或想法，这将对我非常有帮助！我相信可能有更直接的方法可以解决这个问题，但我似乎无法在网上找到它......谢谢，

阿德里安

我使用 ScrollMagic 在网页的每个部分触发动画。这适用于桌面和移动设备上的某些浏览器。

但是，有些移动浏览器（旧版本的 Safari 和 Chrome（在 ipad 上））在滚动事件完成之前不会播放这些动画。我知道有办法解决这个问题。但是，我想在不受支持时简单地关闭这些动画。

有没有办法用 Modernizr 检测到这一点？还是我必须针对特定的浏览器及其版本？