javascript - scrollmagic没有响应触发元素

我在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主要有两个错误。

您的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中完成。