ScrollMagic是一个jQuery插件，它基本上允许你像回放擦洗控件一样使用滚动条。
我有一个网站，其中包含一个水平溢出的 元素。我希望当用户从上到下垂直滚动网站时，div 从左到右水平滚动。 我有一个网站，其中包含一个具有水平溢出的 <div> 元素。我希望当用户从上到下垂直滚动网站时，div 从左到右水平滚动。在此阶段，主要内容不应移动，只有 div 应该滚动。一旦 div 完全滚动到右侧，网站的垂直滚动应该正常继续。反过来也应该如此。 我尝试使用 ScrollMagic 进行固定，但是在尝试固定主要内容容器时遇到卡顿： https://codepen.io/oelrim/pen/ZEGWvOK 还有其他插件可以实现我想要的吗？ 试试这个： var scene = document.querySelector('#sec-2'); var rect = document.querySelector('#rect'); var startEffect = scene.getBoundingClientRect().top + window.scrollY; var effectLength = 500; scene.style.marginBottom = effectLength +'px'; window.addEventListener('scroll', function(e){ var effect = window.scrollY - startEffect; if(effect > 0 && effect < effectLength) { scene.style.marginTop = effect+'px'; scene.style.marginBottom = effectLength-effect+'px'; rect.style.left = effect * (scene.offsetWidth-rect.offsetWidth) /effectLength+'px'; } else if (effect < 0) { scene.style.marginTop = 0; scene.style.marginBottom = effectLength+'px'; rect.style.left = 0; } else { scene.style.marginTop = effectLength+'px'; scene.style.marginBottom = 0; rect.style.left = (scene.offsetWidth-rect.offsetWidth)+'px'; } }); html, body {padding:0;margin:0} #sec-1 { height: 100vh; background: repeating-linear-gradient(yellow 0, yellow 10px, green 10px, green 20px); } #sec-2 { position: relative; height: 100vh; background: repeating-linear-gradient(red 0, red 10px, green 10px, green 20px);} #sec-3 { height: 100vh; background: repeating-linear-gradient(red 0, red 10px, blue 10px, blue 20px);} h1 { color: white; text-shadow: 2px 2px 3px black, -2px -2px 3px black; margin: 0; } #rect { position: absolute; width: 60px; height: 60px; background-color: white; top: calc(50% - 30px); left: 0; } <div id="sec-1"> <h1>This is section 1</h1> </div> <div id="sec-2"> <h1>This is section 2</h1> <div id="rect"></div> </div> <div id="sec-3"> <h1>This is section 3</h1> </div> 很棒的片段。谢谢约瑟夫·图卡钦斯基。 我知道这篇文章很旧。也许你们还在这个星球上:D 谢谢 我将您的代码与光滑的滑块结合起来，计算了效果变量的模数以切换到下一张幻灯片。效果很好。 今天，一位客户抱怨卡顿，这是真的，在 Windows 上切换到除 Firefox 之外的其他浏览器，在 mAcO 浏览器中我看到了卡顿。奇怪的是，随着鼠标滚轮移动缓慢，div 会向上滑动一点，然后又下降。 我有一个想法，也许改变 margintop 并不是每个周期都有帮助，但这并没有按计划进行。 是否有其他方法可以在咆哮时固定 div 以消除口吃？ 谢谢
社区您好， 我在我的网站上使用 Scroll Magic 实现了一种效果，可以在用户向下滚动页面时播放视频。这种效果在其他浏览器中完美运行，但我有经验......
我为我的大学黑客马拉松做了这个项目，现在我实现了 expressJS 来注册时事通讯。 时事通讯注册部分工作正常但是当我在 localhost:4000 上运行项目时只有两个或
Svelte可以和ScrollMagic + GSAP一起使用吗？
我在让Svelte和ScrollMagic & GSAP一起工作时遇到了麻烦。我已经试着研究了一整天，但还是找不到解决办法。它是否能和Svelte一起工作，是否有任何 ...
我试图使用ScrollMagic库来使用 "Section Wipes "效果，我为每隔一个div应用一个颜色，使用nth-child(even)，但它似乎不能与ScrollMagic一起工作。所有的框都变成了白色...
在scrollmagic中，我将如何固定场景，在该场景中制作动画，然后在下一个场景上滚动？
我已经成功地将屏幕固定在ScrollMagic中，并且在蒙版上的蒙版因不透明而逐渐消失。但是当下一个屏幕向上滚动时，场景不会固定。我想第一个场景做它...
Webpack中的Scrollmagic视频动画（BigCommerce）
我正在尝试通过scrollmagic实现视频动画。期望的结果是，视频基于用户滚动位置播放。导出默认函数magic（）{//主变量控制器= new ...
在IE和EDGE上使用ScrollMagic绘制SVG时出现的问题
[使用ScrollMagic库绘制SVG时，我遇到了一些问题：github.com/janpaepke/ScrollMagic在此链接http://goo.gl/avrW9r中，您可以看到在Google Chrome中正确绘制的线条，...] >
如何将多个setClassToggle设置到同一触发器ScrollMagic
我正在使用ScrollMagic库进行项目。如何在同一触发场景中设置多个setClassToggle？我的代码：//将树1移到左侧var Waldscene01 = new ScrollMagic.Scene ...
带有Gatsby js的Scrollmagic，部署时未定义窗口
由于WebpackError：ReferenceError：窗口未定义，我的Gatsby站点无法部署到Netlify我已经尝试过：在if（window！== undefined）检查中包装返回语句，但没有...
问题：我试图通过NPM到Gatsby来实现ScrollMagic。在开发期间（gatsby开发），ScrollMagic工作，在gatsby构建和gatsby服务之后，ScrollMagic要么显示错误，要么丢失...
我正在尝试使用ScrollMagic和gsap库进行反应，直到尝试构建代码，都尝试了可以 在网络上找到的所有导入解决方案，但它似乎都没有表现出一切，但是一切都很好...] >
我正在使用带有滚动魔术的gsap在我的项目中制作动画，我试图实现平滑滚动，这对于固定部分非常有用。任何帮助吗？
确定，我将尽最大努力解释我所面临的问题。我是scrollMagic的新手，但此时我已经完成了两个部分。我的问题是此网站将被转换为Wordpress ...
我正在使用ScrollMagic的部分划片在滚动时将一个面板淡入下一个面板，这很完美，但是我想知道在滚动时是否可以捕捉到下一个面板（现在是否停止...
我有一个ScrollMagic场景，上面有很多动画。问题在于控制器似乎无法识别场景。它滚动到其右上方，进入下一个场景。我该如何做...
也包括ScrollMagic和GSAP核心。 SetTween无法正常工作。 var controller = new ScrollMagic.Controller（）; var realBlock = new ScrollMagic.Scene（{tweenChanges：true}）; realBlock ....
我有这个SVG，它使用ScrollMagic在滚动（svg绘图）上进行动画处理，效果很好，但我要寻找的是svg进入后会自动开始播放并完全进行动画处理。]]
我正在尝试在滚动上创建简单的视差动画，并且一切正常，但是我想增加延迟，例如，用户向下滚动并且动画应该使他追上来，换句话说，...
我已经在屏幕底部创建了一个div。单击时，我希望它滚动到下一堂课。我可以获取.top值，但它不会滚动。我已经安装了jQuery，并花了3个小时...