| layout | title | permalink |
|---|---|---|
page |
Animation |
animation.html |
Techniques d'animation en Javascript
Par "Block Reveal Effects" (ou "Element Reveal Animations"), on désigne des animations qui font apparaître un nouveau bloc de contenu. Elles sont souvent déclenchées par le défilement de la page (scroll).
Articles décrivant ces techniques:
- Tutoriel ScrollSpy, sur Grafikart.fr (2019). Propose une technique en pur JavaScript, utilisant l'IntersectionObserver.
- Block Reveal Effects, par Mary Lou (décembre 2016). Utilise les bibliothèques Anime.js et scrollMonitor.
- How to create fancy revealing animations with these simple CSS tricks, par Carlos Roso (août 2017).
- Creating Reveal Effects on Scroll, par Katherine Kato (février 2019). Utilise la bibliothèque AOS.
Quelques bibliothèques Javascript pouvant aider à créer ces effets:
Pour aider à détecter le "scroll":
- Locomotive Scroll, licence MIT.
- AOS (Animate On Scroll) (premier release en 2015, dernier en 2018), licence MIT.
- WOW.js (premier release en 2013, dernier en 2016), licence MIT.
- scrollMonitor (premier release en 2013, dernier en 2017), licence MIT.
- ScrollReveal (premier release en 2014, dernier en 2018)
- ScrollMagic - depuis 2013, toujours maintenu en 2021.
Un joli exemple de ScrollMagic en action: https://sailorhg.com/home_sweet_homepage/
Pour les animations:
- Anime.js
- KUTE.js
- Typed.js - animation typographique
- Velocity.js - inactif depuis 2018
Pour un effect Parallax:
Certains "front-end frameworks" proposent des effets de "Block Reveal":
Exemples de transitions visuelles:
- Transitions, une collection du site wwwwards