Créer un effet de parallaxe au scroll facilement
ERROR
00:00
00:00

TUTO Créer un effet de parallaxe au scroll facilement

Adrien Gazaix
5,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du HTML
Leçon 2
Mise en place du JQUERY

Plan détaillé du cours

Leçon 1Mise en place du HTML
19m31s
Leçon 2Mise en place du JQUERY
19m48s

Avis des apprenants

Détail des avis
375
Apprenants
17
Commentaires
5/5
Note moyenne
5/5
17
4/5
0
3/5
0
2/5
0
1/5
0
Jean Villemont
Jean Villemont
Publié le 22/03/2023
très bon tuto, je ne savais pas que l'on pouvait faire des calcules entre des pourcentage et des pixels! merci
Cédric Marniquet
Cédric Marniquet
Publié le 02/09/2020
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.
Greg Cadoux
Greg Cadoux
Publié le 13/03/2020
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.

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

jQuery , CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données