article(s) dans votre panier VOIR

Apparition progressive au scroll avec HTML5 et CSS3

  • Vidéo 9 sur 32
  • 4h15 de formation
  • 32 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Apparition progressive au scroll
00:00 / 12:27
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce tutoriel vidéo sur les langages HTML 5 et CSS 3, nous allons réaliser une page. Sa particularité va reposer sur le fait que les éléments vont apparaitre en douceur lorsqu'ils seront dans la zone de visibilité. Cette technique est un peu semblable au lazy loading, technique que nous avons d'ailleurs pu découvrir dans le précédent tutoriel. En revanche, cette nouvelle technique n'aura pas la dimension du chargement propre au lazy loading, car elle est uniquement graphique. Dans le résultat final attendu, les différents éléments constituant la page (images, textes, vidéos) doivent apparaitre au fur et à mesure que vous scrollez la page. Pour ce faire, on commence ici par incorporer le fichier de script sur la page de travail avec : src= «js/script.js». Pour que le tout fonctionne harmonieusement, il va ensuite falloir ajouter au niveau de chacun des éléments qui doivent être affichés, comme un titre H1 par exemple, class=«affichage». Vous allez pouvoir travailler votre script et utiliser une méthode de jQuery que l'on nomme scrollTop. Cette technique représente le nombre de pixels dont le contenu d'éléments à défiler vers le haut, en quelque sorte vers l'extérieur de la fenêtre.