Créer un Effet de Parallaxe Horizontal avec jQuery

Parallaxe horizontal
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 4
Revoir le teaser Je m'abonne
4,5
Transcription

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
4,5
59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

À la fin de ce tutoriel, vous serez capable de :
1. Télécharger et intégrer les librairies nécessaires.
2. Structurer un fichier HTML pour utiliser l'effet de parallaxe.
3. Styliser les éléments avec CSS pour assurer une bonne gestion de l'effet.
4. Utiliser jQuery pour animer les images en fonction de la position de la souris.

Découvrez comment réaliser un effet de parallaxe horizontal en utilisant la bibliothèque jQuery, avec des exemples concrets et détaillés.

Dans ce tutoriel, nous vous guiderons à travers les étapes nécessaires pour créer un effet de parallaxe horizontal. Vous apprendrez à configurer votre environnement, à télécharger les ressources nécessaires, et à structurer votre fichier HTML. Ensuite, nous vous montrerons comment styliser les éléments via CSS et comment utiliser jQuery pour mettre en place l'effet de parallaxe. En suivant ce guide complet, vous serez en mesure de créer une scène interactive où les images se déplacent en fonction de la position de la souris, ajoutant ainsi une profondeur et une dynamisme à vos pages web.

Voir plus
Questions réponses
Quel est l'intérêt d'un effet de parallaxe sur un site web ?
L'effet de parallaxe donne une impression de profondeur et de dynamisme à un site web, ce qui peut améliorer l'expérience utilisateur et rendre la navigation plus attrayante.
Comment positionner les éléments dans l'effet de parallaxe horizontal ?
Les éléments doivent être positionnés en utilisant des valeurs absolues pour chaque calque afin de contrôler leur mouvement relatif par rapport à la position de la souris.
Pourquoi est-il important de définir des tailles différentes pour chaque calque ?
Une taille différente pour chaque calque permet de simuler l'effet de profondeur, en donnant l'impression que les éléments se déplacent à des vitesses différentes.
Dans ce tuto, nous allons réaliser un parallaxe horizontal, donc comme ce qui est montré ici, donc c'est un paysage qui bouge suivant la position de la souris. Alors pour réaliser ça, nous allons aller sur le site github.stefband.com slash jparallaxe et puis vous téléchargez ici le download zip pour avoir l'ensemble des éléments pour réaliser ce parallaxe avec jQuery. Donc au niveau de ma page, pour l'instant, je n'ai pas fait grand chose cette fois-ci. J'ai simplement chargé les librairies jQuery. J'ai une vieille version de jQuery ici, mais c'est pas très grave. Et puis les différents éléments nécessaires au travail avec parallaxe et puis ici un script.js qui pour l'instant n'apparaît pas, mais je vais aller le chercher. Donc dans lequel il n'y a rien, il y a simplement un début de jQuery. Donc nous allons commencer à travailler l'intégration de ces éléments à l'intérieur de cette page. Alors il n'y a pas grand chose à faire, mais si ce n'est que il faut quand même aller chercher les images. On va créer un bloc général, un bloc div qui va s'appeler parallaxe. Ce bloc va englober l'ensemble des images. Le principe donc du plugin parallaxe va être basé sur la différence de la taille des blocs div constituant la scène. Donc on va avoir un grand bloc div qui va s'appeler parallaxe, puis on va avoir des plus petits blocs div qui vont contenir les images et chacun des blocs div va avoir une taille différente. Voilà, ça c'est l'idée générale. Donc allons-y. div id égale, on va l'appeler parallaxe, et puis on le ferme un peu plus bas. Voilà, ça c'est le grand div maître. Ensuite à l'intérieur, eh bien on va créer des plus petits div, pas des plus petits, des div enfants pour l'instant. Div, on va leur donner une classe égale, ça va être parallaxe layer. Et puis comme je veux m'adresser à chacun d'entre eux d'une manière différente, eh bien je vais leur donner tout de suite une classe. Alors celui-là, je vais y intégrer l'image de nuage, donc je vais l'appeler tout bêtement nuage. Et puis fin div. Voilà, donc je vais tout de suite aller chercher mon image, comme ça je pourrais faire un copier coller tout ça. img src, et puis mon image se trouve dans le dossier images, et puis il s'appelle nuage.png. Voilà, un attribut alt, et puis on ferme notre image. Donc je vais copier cela, et puis je vais changer des petites choses. Voilà, ça c'est pour le premier. Hop, 2, et puis on va en faire un troisième. Voilà, donc nous allons avoir dans notre page 4 images qui vont être parallaxes. Alors celui-là ne s'appelle pas nuage, ça va s'appeler arrière, celui-ci centre, et enfin celui-là devant. Contraire à leur nom, eh bien ça va être semblable. Donc devant, là c'est le centre, et puis donc celui-là il s'appelle tout simplement arrière. Voilà, alors on va déjà regarder si tout le monde apparaît bien dans notre page. Alors ça va être un petit peu particulier, je préfère vous prévenir. Donc voilà, on a les éléments qui sont placés les uns au dessus des autres, forcément, puisque pour l'instant ils sont placés dans des blocs, et chaque bloc fait son travail de bloc, c'est à dire qu'ils se positionnent les uns au dessous des autres. Donc par rapport à notre fichier html, c'est terminé. Donc nous allons commencer notre style javascript. Donc nous avons déjà un petit body égale à 0. Donc on a tout de suite attaqué le premier élément, le grand là, celui que l'on a créé au tout début. Et puis celui-là il va être forcément en position relative, puisque tous ces éléments enfants vont être en position absolue. Donc ça c'est une chose. Ensuite donc sa taille, on va déterminer une taille, plus ou moins grande. Donc c'est l'élément qui est situé juste derrière, donc on va lui dire 1200 pixels, cherchant que les autres éléments vont être plus grands que lui. C'est fait exprès. Donc 1200 pixels, une à une hauteur, alors c'est la hauteur moyenne de mes images, donc ça va être 300 pixels. Et puis on va mettre un arrière-plan, ou pas d'arrière-plan du tout, pour l'instant on ne met pas d'arrière-plan, on met un overflow hidden, ce qui permet de ne pas voir ce qu'il y a autour de cette taille, donc 2200 par 300, puisque mes autres éléments vont être plus grands. Et puis ça va être plus sympa de le centrer, donc on va une margin, 0 et auto. Donc ça c'est pour l'élément parent. Alors maintenant on va aller chercher la classe qui s'appelle parallax-layer. Voilà, ça c'est celle qui est commune à tout le monde, on l'a mise à tous les éléments parallax-layer, parallax-layer, et puis après on va s'attacher à ces petits éléments là. Donc parallax-layer, lui, eh bien comme c'est lui qui s'adresse à tout le monde, eh bien on va dire tout le monde vous êtes en positionnement absolu. Voilà, ça c'est parallax-layer. Maintenant on va aller chercher les parallax-layer et puis les img. Donc les images situées à l'intérieur de cette classe. Et on va leur dire également vous êtes en positionnement absolu et puis on lève tout zéro. Voilà pour nos images. Et ensuite on va s'attacher pour chacun des éléments, donc ces fameux là, celui-là, celui-là, celui-là et celui-là. Eh bien on va leur donner une taille différente, ce qui permettra de créer la profondeur et de créer le parallax. Point nuage, alors le nuage on va lui donner une taille de 1250 pixels et puis une hauteur qui sera toujours la même, la hauteur 300 pixels. Donc je vais dupliquer comme ça, ça m'évitera à chaque fois de reprendre la hauteur. Voilà, donc on l'a quatre fois. Donc celui-là doit s'appeler arrière, celui-là centre et celui-là devant. Et puis du coup j'ai perdu un nuage. Point nuage, voilà le nuage c'est bien 1250. Ensuite donc arrière 1300. Toujours la hauteur est bonne. Le centre 1400. Et puis le devant 1500. Vous pourriez éventuellement ajuster. Alors on a pratiquement terminé. Maintenant il suffit simplement qu'on dise au script de parallax quel élément doit être fait en parallax. Donc on va leur dire c'est tout ce qui est en parallax layer qui doit être du parallax. Donc $.parallaxLayer, donc on va aller chercher cette classe. Point parallax, alors ça c'est la syntaxe après de parallax. Parallax. Et puis on lui donne cela par rapport à la souris. Donc mousePort de petits points. Alors je vais mettre ça sur une autre ligne, ce sera plus clair de cette manière. Voilà, mousePort de petits points $, entre guillemets, l'élément qui s'appelle parallax. Donc celui-là c'est le grand. Et voilà, enregistrons et nous allons pouvoir voir dans le navigateur. Donc ça c'était avant et puis ça c'est maintenant. Voilà, c'est nettement mieux de cette manière. Nous pourrions ainsi maintenant adapter, mettre des fonds différents, puis adapter votre graphisme. Mais voilà, donc globalement il n'y a pas grand chose à faire, si ce n'est que bien gérer ces éléments-là, bien gérer leur taille à ce niveau-là. Ça c'est quelque chose de très important. On peut s'amuser à mettre par exemple 1800 sur le devant. Et donc voilà, le devant du coup va beaucoup plus vite que les autres, forcément, puisqu'il est plus grand. Donc ça c'est une gestion à faire, peut-être un petit peu à tâtonner. Et puis ensuite, simplement le petit script qui permet de dire quel élément qui va être en parallax layer et quel élément principal, c'est-à-dire celui-là.

Programme détaillé de la formation

2 commentaires
4,5
2 votes
5
4
3
2
1
wfischli
Il y a 2 years
Commentaire
Bonne formation.
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.
lyazid.meaux
Il y a 3 years
Commentaire
Très bonne formation, juste ce qu'il faut.
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.
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5