ScrollMagic不响应触发元素。

Question

ScrollMagic不响应触发元素。

5

我希望你能帮我翻译一下关于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);
});

我错过了什么？

- Ilir Bajrami

你缺少正确的缩进，哈哈，但是说真的，你能不能设置一个CodePen或者JSFiddle呢？ - Ivan Modric

http://codepen.io/Separator/pen/xZMOJz - Ilir Bajrami

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ivan Modric · Accepted Answer

您的JS主要有两个错误。

You have one parenthesis (")") too many.

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

You are using ScrollMagic version >=2 (which you should) but use their functions from version 1. Here is their documentation for the current versions.

The correct way to initialize the container and scene is now:
```
var container = new ScrollMagic.Container({...});
var scene = new ScrollMagic.Scene({...});
```

当你应用这些更改后，你的代码的工作示例可能会像这个：

$(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);
});

你可能也想查看他们的例子。

编辑

关于项目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 中完成。