Javascript 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中的功能。以下是当前版本的详细信息

初始化

容器

和

场景

的正确方法是：

var container = new ScrollMagic.Container({...});
var scene = new ScrollMagic.Scene({...});

应用这些更改时，

代码的工作示例可能如下所示：

你可能还想看看他们的

编辑

添加到bulletpoint2:

在
ScrollMagic
version1中，脚本中的
容器
和
场景
通过以下方式初始化：

var controller = new ScrollMagic({ *global options applying to all scenes added*});
var scene = new ScrollScene({ *options for the scene* })

var container = new ScrollMagic.Container({...});
var scene = new ScrollMagic.Scene({...});

在版本2中，同样的操作如下：

var controller = new ScrollMagic({ *global options applying to all scenes added*});
var scene = new ScrollScene({ *options for the scene* })

var container = new ScrollMagic.Container({...});
var scene = new ScrollMagic.Scene({...});

这就是为什么你的脚本以前不起作用。
样式设置
仍在
CSS
中完成，但有一件事您缺少正确的缩进；）但是说真的，你能设置一个or吗？thanx很多人：）这对我帮助很大，尽管我不得不增加持续时间和补偿来让它工作。那么你上面提到的集装箱呢？我不太明白。我通过css设计了容器的样式。我也必须在JS文件上初始化它吗？是的，很好。thanx也用于编辑。我不知道scrollmagic有两个版本。我只是在interent上无意中看到了不同的例子，显然我把它弄混了：P现在我知道了第二个版本，所以这对我帮助很大。又是thanx；）也许我在做这个的时候还有其他问题。。。