Animations au scroll avec ScrollReveal.js
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Animations au scroll avec ScrollReveal.js

Sébastien Imbert
5,99€
Acheter maintenant, payer plus tard. En savoir plus

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
05m24
Leçon 2Les fonctionnalités de base
11m13
Leçon 3Les fonctionnalités avancées
11m03
Leçon 4Animer tous les éléments d'une page (one page)
12m20

Aperçus

Avis des apprenants

Détail des avis
199
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

Payer plus tard

Prix d'achat : 5,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1429 tutos gratuits

Notre politique de protection des données