ScrollMagic

ScrollMagic is een makkelijke manier voor lastige animaties. ScrollMagic is een Javascript library speciaal voor het maken van animaties die getriggerd worden door scrollen.

scrollMagic resultaat

scrollMagic resultaat

Via https://ihatetomatoes.net/courses/ kun je hier een videotutorial over volgen. De tutorial is gratis maar je moet je er wel voor aanmelden. Wil je te zijner tijd andere tutorials of workshops bij scrollmagic volgen dan moet je hiervoor wel betalen.

Soms kan het even duren voordat je aanmelding er door komt en je op de links kunt klikken. Je kunt hier alvast de files downloaden. De video’s zijn beschermd en zijn echt pas zichtbaar na inloggen. Je kunt ze ook via Youtube bereiken https://www.youtube.com/watch?v=PyJ5loyJnfE Vandaar kun je dan rechts (bij de voorgestelde video’s) voor de andere video’s kiezen.

Overzicht van tutorials

  • Bij tutorial 1 t/m 4 ben je bezig met ScollMagic.
  • De 1e video duurt even om in te komen. Je moet je de manier van notatie eigen maken, er moet het een en ander getypt worden in het stylesheet en je moet een javascript bestand maken. Spelfouten en haakjes vergeten zijn het grootste struikelblok.
  • Video’s 2 t/m 4 gaan daarentegen weer lekker snel.
    Ja maakt slechts een paar wijzigingen. En binnen no-time heb je een mooie professioneel uitziende scroll animatie. dit lukken in een les van 2* 2 uur.

    ScrollMagic code

    ScrollMagic code

  • Tutorial 5 maakt ook gebruik van GreenSock.
    GreenSock is een complete animatie library (zie video https://greensock.com/) maar daardoor kost dit meer tijd om te leren. Je krijgt bij tutorials 5 een korte intro in Greensock.

    Parallax code

    Parallax code

 

Tips:

  1. Let goed op het gebruik van aanhalingstekens ‘’. Wanneer je die vergeet waar ze nodig zijn of toevoegt waar ze niet nodig zijn dan werkt je animatie niet.
  2. Bij video 5 moet je goed opletten hoe je meteen aan het begin je Javascript files insluit op je pagina. Dit MOET in dezelfde volgorde als in het voorbeeld. Anders zal je file niet werken.

 

Over de schrijver

Petr Tichy schrijf veel tutorials en is bekend met zijn site ihatetomatoes.net. Een interview met hem vind je op : Onepage love

https://ihatetomatoes.net/merry-christmallax/ is een kerstkaart parallax door hem gemaakt. Dit is inmiddels al weer een paar jaar geleden tegenwoordig kun je een online (betaalde) cursus doen bij hem om parallax te leren.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.