$ 6.00

Tuto Animations au scroll avec ScrollReveal.js avec JavaScript

$ 6.00

  • Une formation vidéo de 40m
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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.

Table des matières de cette formation JavaScript (durée : 40m)

    • Installation de ScrollReveal 00:05:24
    • Les fonctionnalités de base 00:11:13
    • Les fonctionnalités avancées 00:11:03
    • Animer tous les éléments d'une page (one page) 00:12:20



Formateur : Sébastien Imbert

Sébastien Imbert a publié 14 tutoriels et obtenu une note moyenne de 4,9/5 sur 1 032 tutoriels vendus. Voir les autres formations de Sébastien Imbert

5,0
note moyenne

2
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de maxidevis laissé le 12/11/2017
    Bravo pour ce tuto clair et précis. J'ai trouver un paramètre intéressant ligne 151, fonction reveal, paramètre sync. Exemple d'utilisation en remplaçant la section intro dans ton tuto. sr.reveal('.intro-feature img', {rotate: {x: 0, y: 0, z: 180}}, 500, false); sr.reveal('.intro-feature', {reset: false}, 500);

  • 5
    avis de laraweb laissé le 11/11/2017
    Bravo pour ce tuto, bien étagé et bien détaillé. à quand un tuto sur ReactJS ?

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    JavaScript
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1591 tuto gratuits


non, je ne veux pas me former gratuitement