scrollmagic reagiert nicht auf das Triggerelement

Question

Ich habe Probleme mit dem ScrollMagic. Es reagiert überhaupt nicht auf das Triggerelement. Im Folgenden werde ich mit dem Code zur Verfügung stellen:

die 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; 
} 

und die 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); 
}); 

was bin ich dabei?

Answer 1

Ihre JS hat hauptsächlich zwei Fehler.

1. Sie haben eine parenthesis (")") zu viele.

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

2. Sie verwenden ScrollMagic Version > = 2 (die Sie sollten), aber ihre Funktionen aus Version verwenden. Hier ist ihre documentation für die aktuellen Versionen.

   Der richtige Weg, um die container und scene ist jetzt zu initialisieren:

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

Wenn Sie gelten diese Änderungen ein funktionierendes Beispiel für Ihre code könnte so aussehen 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); 
}); 

Sie können auch ihre examples betrachten .

EDIT

Zusatz Bulletpoint 2:

In ScrollMagic Version die container und scene wurden im Skript auf diese Weise initialisiert:

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

In der Version die gleiche Sache wird so gemacht:

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

Das ist, warum Sie Skript vorher nicht arbeiten. Die styling ist immer noch in CSS getan.