scrollmagic 不响应触发元素

Question

我对 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);
});

我错过了什么？

Answer 1

你的JS主要有两个错误。

你有一个 parenthesis (")") 太多了。

$(document).ready(function($)) {
                            ^^ --> one of those

您正在使用 ScrollMagic 版本 >=2（您应该这样做），但使用版本 1 的功能.这是当前版本的 documentation。

初始化 container 和 scene 的正确方法现在是：
```
var container = new ScrollMagic.Container({...});
var scene = new ScrollMagic.Scene({...});
```

当您应用 这些更改时 您的 code 的工作示例可能看起来像 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({...});

这就是为什么您的脚本之前不起作用的原因。 styling 仍在 CSS 中完成。

scrollmagic 不响应触发元素

scrollmagic not responding to the trigger element

javascript

jquery

gasp

scrollmagic