Animations au scroll avec ScrollReveal.js
ERROR
00:00
00:00

TUTO Animations au scroll avec ScrollReveal.js

Sébastien Imbert
6,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tutoriel Javascript en vidéo, je vous propose de découvrir la librairie ScrollReveal.js.

ScrollReveal permet de faire apparaître, avec une animation, n'importe quel élément de votre document HTML (titres, paragraphes, images, boutons ...) au scroll, avec la possibilité de personnaliser les animations (durée, délais, transitions, transformations CSS).

Très simple d'utilisation, ScrollReveal ne nécessite que des connaissances très basiques en Javascript, ce tuto est donc accessible aux débutants.

Au cours du tuto ScrollReveal.js, nous verrons :

  • télécharger et comment installer ScrollReveal.js,
  • les fonctionnalités de base (duration, origin, distance, scale, opacity, easing, rotate, delay),
  • les fonctionnalités avancées (reset, mobile, container, useDelay, viewFactor, viewOffset, callback functions),
  • comment animer tous les éléments (titres, paragraphes, images, boutons ...) d'un template HTML simple (one page) rapidement et en quelques lignes de codes.

Pour résumer, ScrollReveal est une librairie très légère, qui n'a besoin d'aucune dépendance pour fonctionner, et qui est indispensable de connaître si vous souhaitez faire des animations au scroll.
Les fichiers sources sont fournis, et je reste disponible dans le salon d'entraide.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Installation de ScrollReveal
Leçon 2
Les fonctionnalités de base
Leçon 3
Les fonctionnalités avancées
Leçon 4
Animer tous les éléments d'une page (one page)

Plan détaillé du cours

Leçon 1Installation de ScrollReveal
05m24s
Leçon 2Les fonctionnalités de base
11m13s
Leçon 3Les fonctionnalités avancées
11m03s
Leçon 4Animer tous les éléments d'une page (one page)
12m20s

Aperçus

Avis des apprenants

Détail des avis
121
Apprenants
8
Commentaires
5/5
Note moyenne
5/5
8
4/5
0
3/5
0
2/5
0
1/5
0
Philippe Piatti
Philippe Piatti
Publié le 23/09/2020
Merci Sébastien car ce tuto est très bon !
Anne Marie Conrad
Anne Marie Conrad
Publié le 09/08/2020
Très bon tutoriel , bien expliqué , sur un rythme qui nous laisse le temps de bien intégrer . Merci
Romaric Laurnce
Romaric Laurnce
Publié le 31/05/2018
Tuto très clair. On va droit au but.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

JavaScript

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données