Introduction à Stellar.js
Objectifs
À la fin de cette vidéo, vous serez capable de :
- Télécharger et intégrer la librairie Stellar.js dans une page web.
- Configurer les éléments de votre page pour créer un effet de parallaxe.
- Utiliser des propriétés CSS pour positionner les éléments et contrôler leur vitesse de défilement.
Résumé
Apprenez à créer un effet de parallaxe vertical en utilisant la librairie Stellar.js. Cet effet se caractérise par le défilement différent de certains éléments par rapport aux autres, offrant une illusion de profondeur.
Description
Dans cette leçon, nous allons apprendre à créer un effet de parallaxe vertical. Un effet de parallaxe consiste en des éléments d’une page web qui défilent à différentes vitesses les uns par rapport aux autres, créant ainsi une impression de profondeur et de dynamisme. Pour ce faire, nous utiliserons la librairie Stellar.js. Nous commencerons par télécharger et intégrer la librairie, ainsi que son pré-requis jQuery.
Nous apprendrons ensuite à configurer Stellar.js pour activer l’effet de parallaxe. Cela inclut l’utilisation de l’attribut data-stellar-ratio pour gérer la vitesse de défilement des éléments. Nous verrons également comment positionner les éléments en dehors du flux normal de la page en utilisant des propriétés CSS telles que position: absolute;, top, left, et z-index.
Enfin, nous testerons notre travail en vérifiant le positionnement et le défilement des éléments pour nous assurer de l’effet souhaité. Grâce à cette leçon, vous serez en mesure d’appliquer un effet de parallaxe à vos propres projets web, ajoutant ainsi une nouvelle dimension visuelle à vos pages.
Questions - réponses
data-stellar-ratio.
Programme détaillé
Module 1 - Introduction à la formation HTML5 et CSS3 Part 4
Module 2 - Initiation javascript et jQuery
Module 3 - Déplacements et apparition
Module 4 - Gestion audio et video
Module 5 - Réaliser des menus
Module 6 - Présenter des images
Module 7 - Technologie Ajax
Module 8 - Les formulaires
Module 9 - Les images
Module 10 - Autres
Dommage que M Audoux ne va pas toujours au terme de ses exemples. Il manque souvent un petit "clic" qui finaliserait le cours.
Je rejoins le commentaire précédent, à savoir qu'il manque les fichiers de travail avec lesquels il serait plus facile de s'exercer.
Est il possible d'avoir les exemples afin de pouvoir travailler dessus et ne pas être obliger de jongler entre l'éditeur et la vidéo.
Merci.