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

1. 你有一个parenthesis（“）”）太多。

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

2. 您使用ScrollMagic版本> = 2（你应该），但使用它们的功能从版本。 当前版本的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 。

编辑

加成bulletpoint 2：

在ScrollMagic版本的container和scene是在脚本初始化这样：

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

这就是为什么你的脚本之前没有工作。 styling仍在CSS中完成。