Dans ce tuto vidéo jQuery, nous allons découvrir ensemble comment créer un effet de parallaxe sur un site web sans l'aide d'un plugin externe.
Nous superposerons 2 éléments et nous allons les faire bouger dans des directions et à une vitesse différente pour créer l'effet parallaxe lorsque l'on scrolle dans une page. Enfin, on ajoutera une media query pour réduire la taille d'un des éléments tout en gardant l'effet parallaxe pour la version mobile du site, en responsive, donc..
Je vous conseille de regarder l'extrait vidéo pour vous rendre compte de ce que l'on va créer dans ce tuto.
Toutes les sources sont fournies avec la vidéo et n'hésitez pas à répondre au QCM à la fin du tuto pour voir si vous avez bien assimilé toutes les notions essentielles.
Bon tuto !
Table des matières de cette formation jQuery, CSS (durée : 39m19s)
-
- Mise en place du HTML 00:19:31
- Mise en place du JQUERY 00:19:48
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Adrien Gazaix
-
Merci pour ce tutoriel bien expliqué. L'effet parallax est sympa ! Petit bémol dans les fichiers téléchargeables, l'une des photos ne s'affiche pas.
-
Merci Adrien, pour ce tuto, très bien expliqué. Je me suis un peu perdu dans les calculs mais sinon, je recommande vivement !!! Pour info, dans ton fichier source, je n'ai qu'une photo noire.
-
Très bon tuto. Un cas pratique bien expliqué. Merci :)
-
Avec quelles versions de logiciels ce tuto est-il compatible ?jQuery , CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés