个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 ScrollMagic 在这之后进行视差部分滚动 tutorial .我让它在视觉上工作，但现在使用鼠标滚轮或触控板时页面已停止滚动。它滚动的唯一方法是拖动右侧的滚动条。
main.css
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
index.html
<head>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="parallax1" class="parallaxParent picture-frame">
<div style="background-image: url(../images/website/some-image.jpg); background-repeat:no-repeat; background-size:100% 100%;"></div>
</div>
<div class="small-text-frame text-align-center">
blah blah blah
</div>
<!-- Include ScrollMagic and GSAP plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
<script src="js/scroll_magic.js"></script>
</body>
scroll_magic.js
// init controller
var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
这一切都遵循他们的教程，非常有效。显然我做错了什么，但我不知道是什么。该问题同时出现在 Chrome 和 Firefox 中。
感谢您的任何建议!
编辑
有人向我指出，控制台中记录了一些我没有注意到的错误。在页面加载时生成的所有错误本质上都是我可以接受的调试错误。然而，当我试图用我的鼠标滚轮滚动页面时，突然间这个错误开始产生数百次:
Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present.
它的来源是TweenMax.min.js:16
对此进行了深入研究，发现了一些 posts .看起来我缺少一个 GreenSock 插件，但我认为我的脚本标签应该已经找到了它。我已经尝试了很多方法来获得这个插件，但没有任何效果。例如，我尝试添加这一行:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>
有谁知道如何将这个插件包含到我的元素中？我非常愿意使用外部引用来完成它，而不是将整个元素复制到我的服务器上。
最佳答案
在上面的评论中完全归功于@Shikkediel，这里的解决方案只是在 </body> 之前添加这一行标签(其他脚本标签已经存在):
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
因此，与使 ScrollMagic 使用视差部分相关的完整脚本组是这样的(忽略调试标签进行调试):
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Include ScrollMagic and GSAP plugin -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<script src="js/scroll_magic.js"></script>
关于javascript - ScrollMagic - 鼠标滚轮和触控板停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33795588/
25
4
0
我对 scrollmagic 很陌生，我希望在整个页面中多次使用单个类来在它进入 View 时进行动画处理。 这可能吗？ see pen 欢迎任何指点。 $(function() { cont
我想做的就是在 div 第一次滚动到 View 中时向其添加一个类，然后将其保留在那里。 (所以，我不想切换它 - 只需触发一次)。我有一个基于向父 div 添加类的动画，即使我指定了一个方向，当我在
我正在使用 ScrollMagic 来获取一些滚动动画。问题是我需要使用偏移量，以便动画在滚动的某个点触发，但这完全取决于窗口高度。 所以在我提供的示例中 https://jsfiddle.net/5
我以前使用过 superscrollorama 并开始使用scrollmagic，但我无法设法让一些 div 正确地设置动画。前 2 个 div 很好，但最后两个，一旦我向下滚动，就不会动画。我还想向
我正在尝试固定 ul全尺寸屏幕上的侧边栏，然后取消该图钉并将其更改为父图 nav ul的在半尺寸屏幕上。所以基本上从一个触发器、目标和偏移开始>当屏幕尺寸改变时取消它们>(并)用新的设置固定一个新的选
我正在尝试将图片暂停一段时间。滚动一点后，图片(第 1 部分)应该淡出并显示下面的图片。再滚动一段时间后，两者都应该滚动出来。 我正在使用http://janpaepke.github.io/Scro
我想使用scrollmagic 在我的页面上添加效果。我的滚动场景已定义并且可以工作。现在我希望页面在场景未完成时停止滚动。 我尝试将场景放入带有 overflow-y:scroll; 的容器中，但这
我正在尝试使用 ScrollMagic 的这个特定动画 http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sectio
我在需要显示进度条的站点上使用 scrollMagic 库。该栏将显示用户在页面上的位置。进度条的宽度会随着用户向上或向下滚动而改变。我似乎无法让它与 scrollMagic 库一起使用。这是我在其他
我是 ScrollMagic 的新手，所以不确定我是否忽略了一些明显的东西。 我设置了一个 codepen这说明了我正在努力实现的目标，以及一个 alternative version 几乎做我想做的
我是第一次使用 ScrollMagic，据我了解如何根据起始元素和持续时间触发我的动画 是否可以设置结束触发器而不是持续时间？ var smcontroller = new ScrollMagic.C
有这样的事情。 https://jsfiddle.net/j6u6wp7x/1/ var scene; var controller; $(document).ready(function() {
我正在试验视差和滚动魔法。在 scrollmagic demo 的视差示例中我正在尝试在第一个视差部分中制作动画内容。 这是 a fiddle of my experiment . 我无法让 #box
在我的网站上，ScrollMagic 场景触发器 Hook 位置存储在一个数组中 slideOffsets = []这是在使用初始化时填充的 var scene; for (var i=0; i元素滚
我正在使用 ScrollMagic 在这之后进行视差部分滚动 tutorial .我让它在视觉上工作，但现在使用鼠标滚轮或触控板时页面已停止滚动。它滚动的唯一方法是拖动右侧的滚动条。 main.c
所以我在构建垂直视差滚动网站时遇到了问题。 目前我正在使用 ScrollMagic 来创建视差部分，并且效果很好。当我尝试将内容放在上面时，问题就来了。对于我的情况，我正在使用 Bootstrap 的
我有一个Scrollmagic问题:我正在使用triggerElement，但它说它在页面顶部进入triggerElement，但triggerElement却在页面中间。这是我的 ScrollMag
我在使用 scrollmagic 时遇到问题，因为我试图在 scrollmagic 中创建自然部分删除的演示，但我遇到了上述问题。看起来我在 querySelector 中出错了，但我不知道我在这里做
我正在使用 ScrollMagic 插件，发现 here 。我在尝试跨多个屏幕尺寸固定对象时遇到问题。问题是我在引脚的“持续时间”属性中进行硬编码，但持续时间设置为像素。由于像素根据您使用的设备而不同
伙计们，我正在使用 scrollmagic 来实现其视差部分删除视差效果。我一直在完全按照发现的方式关注演示 here而且我尝试的任何事情似乎都没有用。这让我发疯我已经在这里待了几个小时了。我在这里遗
我是一名优秀的程序员,十分优秀！