ScrollMagic ist ein JavaScript Framework, welches dem Entwickler viel Arbeit bei der Erstellung von scrollbaren Onepager Websites abnimmt.Onepager erfreuen sich anno 2015 großer Beliebtheit bei Webauftritten. Wenig verwunderlich, ist es doch eine attraktive und zeitgemäße Möglichkeit, eine überschaubareMenge an Inhalten hübsch zu verpacken und zu präsentieren und den Besucher zur Interaktion einzuladen.

Hier einige tolle Beispiele, die mithilfe von ScrollMagic erstellt wurden:

• http://www.viko.net/en/
• http://buntspenden.bleech.de/de/
• http://www.flyacts.com/multi-channel-app/

Vorraussetzungen:

• jQuery
• Optional, aber empfohlen: Animationsframework TweenMax

<script type="text/javascript" src="lib/TweenMax.min.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="lib/jquery.scrollmagic.js"></script>

Einbindung von Tween (optional), jQuery und dem ScrollMagic Basisscript.

    
Epic Onepager Demo
    

        
box 1
        
box 2
        
box 3
    
    

        
This ist he first content!
    
    

        
I am the second content!
    
    

        
Here comes the third one!
    

Dies ist unser (sehr einfach gehaltenes) HTML-Setup. Drei Inhaltsbereiche und ein Menü mit Links zu den jeweiligen Bereichen.

    /*basic controller variable*/
      var controller = new ScrollMagic();

      /*define menu click animation*/
controller.scrollTo(function(newScrollPos){
        $("body").animate({scrollTop: newScrollPos-100});
      });

      $(document).on("click","#menu a",function(e){
        var elementId = $(this).attr("href");
        if($(elementId).length>0)  {
          e.preventDefault();
          controller.scrollTo(elementId);
          if(window.history && window.history.pushState)  {
            history.pushState("",document.title,elementId);
          }
        }
      });

/*pin menu on top if leaving viewport*/
      var menuScene = new ScrollScene({
        triggerElement: '#menu',
        triggerHook: 'onLeave',
      }).setPin("#menu");

      menuScene.addTo(controller);

  /*define scenes*/
      var scene = new ScrollScene({triggerElement:'#infobox',triggerHook:0.5});
      scene.addTo(controller);
      scene.addIndicators();
      var fadeTween = TweenMax.from('#infobox',3,{opacity:0});
      scene.setTween(fadeTween);

      var scene2 = new ScrollScene({triggerElement:'#infobox2',triggerHook:0.6});
      scene2.addTo(controller);
      scene2.addIndicators();
      var fadeTween2 = TweenMax.from('#infobox2',2,{opacity:0});
scene2.setTween(fadeTween2);
      
      var scene3 = new ScrollScene({triggerElement:'#infobox3',triggerHook:0.8});
      scene3.addTo(controller);
      scene3.addIndicators();
      var fadeTween3 = TweenMax.from('#infobox3',2,{opacity:0});
      scene3.setTween(fadeTween3);
      scene3.on("start", function (event) {
         console.log(„This is my callback on start oft he third scene!“);
       });