我需要任何有使用 scrollmagic.js 经验的人的帮助

我正在尝试创建类似的东西： http ://work.antonandirene.com/karimrashid/

滚动页面时部分重叠的位置。

我正在使用滚动魔法（http://scrollmagic.io/）

小提琴：http: //jsfiddle.net/st86x71m/1/

我遇到的主要问题是允许高于 100% 的内容在下一个面板可见之前滚动。我已经解决了这个问题，但有一些问题......

我的问题：

我需要在附加内容完成滚动后删除间隙，以便下一个面板显示附加内容何时位于其父级的底部，而不是现在的 -100%。

我还需要弄清楚如何动态设置 z-index，以便上一张幻灯片具有更高的 z-index。我目前正在css中手动设置它们。

任何帮助表示赞赏，

谢谢大家。乔恩。

问题

有没有办法在类似于clip-mask使用 JavaScript 或 jQuery 的渐变上淡出内容？

问题

我有一个带有透明背景的固定标题，以及一个带有透明部分的“.png”徽标。我有半透明的元素，它们垂直向上滚动页面，因此在标题和徽标下方。

当事物在徽标下滚动时，它们会显示出来，一切看起来都很糟糕。

建议的解决方案

我们希望在某个点（标题的底部）之上淡出内容。我们使用ScrollMagic和GSAP来为元素滚动时设置动画，这会导致与clip-path其他 CSS 修复发生冲突，所以我最有可能寻找 JavaScript/jQuery 修复。

示例代码

应评论者的要求，我创建了一个 JSFiddle，其中包括几部分。

有两个要素需要考虑：#masthead和#content。下面有一个区域（在 中blue）#masthead，我想在其中#content渐变为从不透明度1到的渐变0。

https://jsfiddle.net/dotzak/o9hcnufe/3/

I have a fixed container of 100vh x 100vw that contains 6 absolutely positioned divs that are 100vh x 100vw.

I use a dummy element that is positioned relative w/ 6 divs that are 100vh to trigger each scene.

When I resize the window, the scene's animation moves forward and backward in time. Is there a way to prevent that from happening?

我在需要显示进度条的网站上使用 scrollMagic 库。该栏将显示用户在页面上的位置。进度条的宽度会随着用户向上或向下滚动而改变。我似乎无法让它与 scrollMagic 库一起使用。这是我尝试过的。谢谢！

我正在玩 Jan Paepke 出色的 scrollMagic 并且似乎无法让某些TimelineMax代码真正工作。当您向上滚动页面时，带编号的圆圈应依次淡出 50%。从我的代码看来它应该可以工作，但事实并非如此。我究竟做错了什么？

这是我的实验

我正在使用Petr Tichy 的演示和一个 scrollMagic 示例

这是js：

这是CSS：

这是html：

我正在尝试将 ScrollMagic 引脚（和其他 coll 功能）与一个普通的 JavaScript “滚动缓动”结合起来，就像这个网站一样：http: //www.boy-coy.com/

（“滚动缓动”是通过将所有内容放在一个固定容器中实现的，并为其 transform-translate-y CSS 设置动画。为了使窗口滚动条，我们在所需高度添加一个绝对定位的 div。）

我怎样才能将这两者结合起来？

谢谢！

我有一个正在开发的单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我试图创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddle 工作（第一次使用小提琴，所以我可能有一些没有正确链接的东西。链接到小提琴...

在我完成这项工作后，我有一个关于滚动魔法的后续/新问题，但我认为如果我能够在小提琴中展示我的问题会很有帮助。

我有一个正在开发的单页滚动网站。我正在尝试使用滚动魔法固定第一部分，然后让网站的其余部分滚动到它​​的顶部。正如您在我的小提琴中看到的，第一部分是固定的，但其余部分只有内容滚动而不是背景颜色。我不确定这是为什么。你可以看到我在这里的意思小提琴...

我正在开发一个个人网站，将 Three.js 和 ScrollMagic 与 OO Javascript 结合起来。当用户滚动 3d 对象变换时。这一切都很好，但有一个轻微的性能问题。为了改善这一点，我想将一些计算位置的循环/for函数移动到网络工作者（每当我调用循环函数时，滚动滞后）。

问题是我试图将类实例（THREE.PointCloud）的数组（512）传递给网络工作者。我似乎无法从网络工作者的这些实例中获得任何有意义的完整属性。

首先，我只是试图将数组传递给工作人员并得到这个错误'Uncaught DataCloneError：无法在'Worker'上执行'postMessage'：无法克隆对象。

然后我意识到我不能这样做，所以我使用了 JSON.stringify() 和 JSON.Parse()。我可以得到数组的长度。但是，我无法获取每个实例的属性。

我想我需要使用 ArrayBuffer？但我不知道如何将我的实例数组转换为 ArrayBuffer。任何人？还是有更简单的方法来提高性能？

帮助将不胜感激。

谢谢。

我试图弄清楚这个ScrollMagic Demo是如何工作的。这是我在演示中使用的代码：

我的印象是ScrollMagic使用的是GSAP，但我.setTween()对 ScrollMagic 的这种方法不是很熟悉。

以下是一些我不能完全理解的事情：

• duration: 目前设置为200%。这是动画在滚动页面方面完成的持续时间吗？
• .setTween()：第一个参数是一个 html 选择器，但是当我使用一个类时，它似乎破坏了它。第二个参数是y位置。但是这个参数是否用于在加载时偏移内容，即该#work部分是否设置为-80%加载时偏移？

我试图查看文档以解决这些问题，但他们似乎在这里使用了不同的方法。我只是在寻找一个简单的视差效果。