我对 ScrollMagic 有疑问。它在触发元素上根本没有响应。下面我将提供代码:
CSS:
.container {
height: 3000px;
}
#trigger {
position: relative;
top: 300px;
}
.katrori {
opacity: 0;
position:relative;
top:300px;
background-color:#eee;
height:400px;
padding:25px;
font-family:Arial, Sans-serif;
font-weight:bold;
}
和 JS:
$(document).ready(function($)) {
var controller = new ScrollMagic();
var tween = TweenMax.to(".katrori", 0.5, {opacity: 1, backgroundColor: "#1d1d1d"})
var scene = new ScrollScene({triggerElement: "#trigger"})
.setTween(tween)
.addTo(controller);
});
我错过了什么?
最佳答案
你的JS
主要有两个错误。
你有一个
括号
(")"太多了。$(document).ready(function($)) { ^^ --> one of those
您正在使用 ScrollMagic 版本 >=2(您应该这样做),但使用它们从版本 1 开始的功能。这是他们的 documentation对于当前版本。
现在初始化
容器
和场景
的正确方法是:var container = new ScrollMagic.Container({...}); var scene = new ScrollMagic.Scene({...});
当您应用这些更改时,您的代码
的工作示例可能类似于this。 :
$(document).ready(function ($) {
var controller = new ScrollMagic.Controller(),
tween = TweenMax.to(".katrori", 0.5, {opacity: 1, backgroundColor: "#1d1d1d"}),
scene = new ScrollMagic.Scene({triggerElement: "#trigger"});
scene
.setTween(tween)
.addTo(controller);
});
您可能还想看看他们的 examples .
编辑
要点 2 的补充:
在 ScrollMagic
版本 1 中,container
和 scene
在脚本中初始化> 这样:
var controller = new ScrollMagic({ *global options applying to all scenes added*});
var scene = new ScrollScene({ *options for the scene* })
在版本 2 中,同样的事情是这样完成的:
var container = new ScrollMagic.Container({...});
var scene = new ScrollMagic.Scene({...});
这就是为什么您的脚本之前不起作用的原因。 样式
仍然在 CSS
中完成。
关于javascript - scrollmagic 不响应触发元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35365507/