Question

我有ScrollMagic的问题。它根本没有对触发元素做出响应。下面我将提供代码：

CSS：

$(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：

public Person
{
    public string Name { get; set; }
    public boolean HasPets { get; set; }
}

public void Foo(Person person)
{
    if (person.Name == null) {
        throw new Exception("Name of person is null.");
        // I was unsure of which exception to throw here.
    }

    Console.WriteLine("Name is: " + person.Name);
}

我错过了什么？

Answer 1

您的JS主要有两个错误。

你有一个parenthesis（＆＃34;）＆＃34;）太多了。

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

您使用的是ScrollMagic版本＆gt; = 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没有响应触发器元素

1 个答案: