Guide ultime d'utilisation de Parallax avec Divi
Publié: 2017-07-25Essayer de trouver la bonne taille d'image pour la parallaxe peut être un peu frustrant. L'image peut avoir fière allure en tant qu'image d'arrière-plan standard, mais dès que vous sélectionnez "Utiliser l'effet de parallaxe", l'image est agrandie et rien ne semble correct. Pour éviter cette aggravation à l'avenir, vous devez comprendre ce qu'est la parallaxe et ce qui arrive à l'image lorsqu'elle est mise en mode parallaxe.
Aujourd'hui, je vais approfondir le fonctionnement de la parallaxe avec Divi. J'expliquerai exactement ce qui se passe lorsque vous utilisez les deux méthodes de parallaxe différentes, quelle taille d'image est la meilleure, et je vais même ajouter quelques hacks css personnalisés pour positionner vos images exactement comme vous le souhaitez.
Allons-y.
Qu'est-ce que la parallaxe ?
En ce qui concerne la conception Web, la parallaxe est un terme utilisé pour décrire un effet qui donne la perception d'une distance et d'un mouvement réalistes à l'aide d'une sorte d'animation bidimensionnelle. Ceci est accompli en modifiant les vitesses de défilement des différents éléments sur une page Web pour créer l'illusion de la distance tout en visualisant un point fixe. La technique existe depuis un certain temps ailleurs que sur le Web. Vous vous souvenez de Super Mario Brothers ? Si vous avez déjà joué à des jeux vidéo dans les années 80 (Nintendo NES), la plupart des jeux utilisaient cette technique pour donner l'impression de mouvement en utilisant uniquement des images 2D. Les éléments au premier plan se déplaçaient plus rapidement que les arbres/montagnes/nuages à l'arrière-plan. Ainsi, créant un mouvement plus réaliste.
Cet effet ressemble beaucoup à la méthode True Parallax de Divi. Sauf que le mouvement est vertical au lieu d'horizontal.
Comprendre le fonctionnement de Parallax avec Divi
Avec Divi, Parallax est vraiment facile à déployer sur n'importe quelle image d'arrière-plan dans n'importe quelle section, ligne, colonne ou module. Tout ce que vous avez à faire est de régler l'option Effet de parallaxe sur « OUI », puis de sélectionner votre méthode de parallaxe (CSS ou True Parallax).
La méthode CSS
La méthode CSS est l'une des deux méthodes que vous pouvez choisir pour votre effet de parallaxe. Vous pouvez probablement deviner ce qui se passe simplement en testant cette méthode sur votre site. Elle est appelée méthode CSS car elle n'utilise que CSS pour créer l'effet. Cette méthode utilise CSS pour fixer l'image d'arrière-plan pendant que les autres éléments de la page défilent normalement. Cela donne l'impression que le contenu se déplace devant l'image de fond.
La vraie méthode de parallaxe
La deuxième méthode est appelée True Parallax. Il est appelé « vrai » probablement parce qu'il illustre l'idée conventionnelle de l'effet de parallaxe. Cette méthode utilise CSS et JavaScript pour créer un mouvement de défilement légèrement plus lent que les autres éléments de la page. Il s'agit d'une représentation plus réaliste du mouvement en raison de la perception de la distance qu'il crée entre l'image en mouvement lent en arrière-plan et les éléments en mouvement plus rapide au premier plan.
Que se passe-t-il lorsque la parallaxe est activée dans Divi ?
Cela peut être frustrant si vous ne comprenez pas ce qui se passe dans les coulisses. Par conséquent, il est utile de savoir exactement ce qui arrive à l'image lorsque la parallaxe est activée.
Que se passe-t-il lorsque la méthode CSS est sélectionnée ?
Lorsque CSS Parallax est sélectionné, l'image est enveloppée dans un nouveau div avec une position absolue qui s'étend sur toute la taille de la fenêtre du navigateur. Voici les classes CSS et les extraits de code qui font cela dans Divi :
.et_parallax_bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
background-attachment: fixed;
}
Étant donné que la taille de l'arrière-plan est définie sur « couvrir » avec une hauteur et une largeur de 100 %, l'image « couvrira toujours » chaque partie de son conteneur. Dans ce cas, le conteneur est la fenêtre du navigateur. Cela signifie que des parties de l'image seront cachées derrière d'autres sections de contenu, car l'image d'arrière-plan continuera toujours à s'étendre et à se contracter avec la taille de la fenêtre du navigateur.
Imaginez qu'il s'agisse d'une image d'arrière-plan ordinaire ajoutée à un module d'en-tête en haut d'une page.
Le rapport hauteur/largeur de l'image est correct (1920 × 1080) et la taille de l'image couvre et s'adapte parfaitement à la section sans aucun chevauchement lorsqu'elle est visualisée sur un écran de 1366 × 766. La zone blanche sous l'image est le reste du contenu de la page.
Voici ce qui se passe lorsque vous sélectionnez la parallaxe pour votre image.
Comme vous pouvez le voir, l'image s'agrandit à la fois verticalement (pour atteindre le bas de la fenêtre du navigateur) et horizontalement (pour conserver le rapport hauteur/largeur de l'image). Le carré noir représente votre moniteur, donc tout ce qui se trouve à l'intérieur du carré noir est ce que le spectateur voit. J'ai rendu la section de contenu blanche en bas semi-transparente afin que vous puissiez voir où se trouve l'image d'arrière-plan cachée derrière. Là, l'image reste fixe pendant que vous faites défiler et d'autres éléments se déplacent de haut en bas devant l'image.
Que se passe-t-il lorsque la méthode True Parallax est sélectionnée ?
Si vous avez défini True Parallax, l'image est encapsulée dans un nouveau div avec la même classe CSS :
.et_parallax_bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
Cependant, grâce à l'utilisation d'un peu de JavaScript, la hauteur et la position de l'image sont définies dynamiquement en fonction de la taille de la fenêtre du navigateur et lors du défilement de la page. Les deux valeurs ajoutées dynamiquement à l'image d'arrière-plan sont la valeur px pour la propriété height et la valeur translate pour la propriété transform. La valeur de la propriété height détermine la hauteur de l'image tandis que la valeur translate de la propriété transform détermine le positionnement exact de l'image sur la page en fonction des axes x et y.
Voici le code qui est inséré dans la balise d'image de mon image d'arrière-plan de parallaxe avec la fenêtre de mon navigateur 1366 × 766 :
height: 960.8px;
transform: translate(0px, 220.5px);
Notez les deux nombres dans la propriété transform. Ces deux nombres contrôlent le positionnement de l'image de fond. Le premier nombre (0px) positionne l'image le long de l'axe x (horizontalement). Comme il est défini sur 0px, l'image ne sera pas déplacée. Le deuxième nombre positionne l'image le long de l'axe y (verticalement). Comme il est actuellement de 220,5 pixels, cela signifie que l'image est déplacée vers le bas de la page 220,5 pixels.
Notez également que la valeur de hauteur (960,8 px) est supérieure à la hauteur de la fenêtre de mon navigateur (766 px) d'environ 200 px. C'est pour permettre à l'image d'être poussée à 220,5 pixels au-delà du bas de la fenêtre du navigateur.
Lorsque la méthode True Parallax est sélectionnée, vous avez peut-être remarqué que votre image explose encore plus que la méthode CSS. En effet, la position de l'image est étirée de 30 % supplémentaires de la hauteur du navigateur.
Vous vous souvenez de notre illustration d'arrière-plan habituelle ?
Voici ce qui arrive à l'image une fois que True Parallax est sélectionné (avant de commencer à faire défiler bien sûr):
Comme vous pouvez le voir, l'image est tirée un peu plus loin du bas de la fenêtre du navigateur. Cette fenêtre de navigateur mesure environ 1080 × 700, elle est donc assez petite, mais je voulais vous montrer ce qui se passe sur une fenêtre de bureau plus petite.
Pourquoi True Parallax étire-t-il l'image jusqu'à présent ?
Eh bien, ma meilleure supposition est de s'adapter à des tailles d'écran plus grandes. Une fois que la fenêtre du navigateur atteint une taille d'écran de 1920 × 1080, l'image d'arrière-plan ne dépasse plus le bas de la fenêtre et s'adapte parfaitement.
Pourquoi True Parallax utilise-t-il JavaScript ?
La principale raison pour laquelle True Parallax nécessite JavaScript est que l'image d'arrière-plan doit se déplacer à une vitesse différente de celle des autres éléments lors du défilement. Vous vous souvenez des frères Mario ?
Avec True Parallax, si j'augmente la taille de mon navigateur, la valeur de la hauteur augmente également de manière dynamique via JavaScript en s'assurant que mon image est toujours assez grande pour le navigateur.
Si je fais défiler la page vers le bas, la valeur de la position de traduction (les 220,5 pixels dans l'exemple ci-dessus) augmente, déplaçant la position verticale (axe des y) de l'image vers le bas de la page.
Si je fais défiler vers le haut, la valeur de la position de traduction diminue, tirant l'image vers le haut de la page. Mais comme l'image est poussée vers le bas et tirée vers le haut à une vitesse différente de celle des autres éléments lors du défilement, vous obtenez l'effet True parallax.
Quel type d'image dois-je utiliser ?
Si vous souhaitez utiliser l'effet de parallaxe sur votre site, il est crucial de choisir la bonne image d'arrière-plan. Vous ne voulez pas que l'arrière-plan soit trop encombré ou distrayant. Mais d'un autre côté, vous ne voulez pas non plus que ce soit une note ennuyeuse.
Voici 5 conseils généraux pour choisir le bon type d'image pour la parallaxe
- Évitez les photos distrayantes. Les images trop chargées créent de la confusion et détournent l'attention du contenu.
- Assurez-vous que votre photo correspond au thème de votre site. Votre site doit raconter une histoire. Cette image de parallaxe (comme le reste de vos images) doit s'adapter au thème.
- Gardez-le grand et simple. N'oubliez pas que votre image de parallaxe sera également affichée sur des écrans plus petits. Assurez-vous que les détails de la photo ne sont pas si petits qu'ils ne puissent pas être reconnus sur des appareils plus petits.
- Ajoutez une couleur de superposition si nécessaire. Parfois, une bonne image de parallaxe aura à la fois des aspects sombres et clairs qui peuvent finir par masquer votre texte lors du défilement. L'ajout d'une superposition sombre ou claire garantira que votre texte peut être lu n'importe où sur l'image
- Rendez-le intéressant. Il y a moyen de prendre des photos pour se contenter de quelque chose d'ennuyeux. Prenez le temps d'en trouver un qui engage votre public et attire son attention.
Quelle taille d'image d'arrière-plan de parallaxe devriez-vous utiliser ?
Celui-ci est un peu difficile à répondre. Il n'y a pas de taille unique pour toutes les images de parallaxe. En fait, il n'y a pas de taille unique dans la conception de sites Web, du moins pas depuis l'avènement du design réactif. Mais, même si je ne suis peut-être pas en mesure de vous donner une règle ferme, je peux vous proposer quelques directives générales pour choisir les images d'arrière-plan de parallaxe de la bonne taille avec Divi.
Étant donné que la taille d'écran la plus populaire est d'environ 1366 × 766, je m'assurerais certainement que toutes les images de parallaxe d'arrière-plan ont au moins cette taille. Mais en raison de la popularité des moniteurs plus grands, j'opterais pour une taille plus grande comme 1920 × 1080. Cela garantira que les utilisateurs voient une image de haute qualité sur des bureaux plus grands.
Le problème avec une image aux dimensions 1920 × 1080 est que vous aurez rarement une section visible de 1080px de hauteur. Vous pouvez donc miser sur le bas de ces images en restant cachées.
Conseils utiles pour que votre image d'arrière-plan de parallaxe soit correcte
Pour les en-têtes et les sections supérieures
Le moyen le plus simple de vous assurer que votre image est entièrement visible et belle est d'utiliser le module d'en-tête pleine largeur. De cette façon, votre image d'arrière-plan aura toujours fière allure, quelle que soit la taille de l'écran. Mais, si vous utilisez une image d'arrière-plan de parallaxe à l'aide du module d'en-tête pleine largeur, vous devrez peut-être ajouter du rembourrage en haut et en bas du module pour afficher davantage de l'image. Vous pouvez le faire en utilisant Visual Builder. Accédez aux paramètres du module d'en-tête. Sous l'onglet Avancé, saisissez ce qui suit dans la zone de texte Élément principal :
Padding: 250px 0 250px;
Cela devrait vous amener à aller dans la bonne direction.
Si vous n'avez toujours pas assez de l'image affichée, je vous suggère de recadrer la partie supérieure de votre image, puis de la télécharger à nouveau. Cela peut aider.
Essayez également de sélectionner des photos dont le contenu est insignifiant en bas de l'image et le contenu le plus important en haut. Pour les en-têtes, vous ne devez vous attendre à voir que les 700 pixels supérieurs de l'image de parallaxe.
Pour les sections régulières/moyennes
Assurez-vous de laisser suffisamment d'espace autour de votre contenu pour exposer suffisamment l'arrière-plan afin que vous puissiez obtenir une image complète lorsque la section atteint le point de vue central de l'utilisateur. Utilisez le rembourrage à votre avantage. Si vous envisagez d'utiliser la parallaxe, ne laissez pas vos utilisateurs s'embrouiller et doivent faire défiler vers le haut et vers le bas juste pour voir quelle est l'image. Mieux vaut leur montrer la première fois.
Pour les sections inférieures/pieds de page
Si vous utilisez la méthode CSS, vous pouvez vous attendre à voir davantage le bas de votre image d'arrière-plan (en fonction de l'espace dont vous disposez). J'essaierais de recadrer le bas de la photo pour montrer davantage le haut dans ces sections.
Si vous utilisez la méthode True Parallax, vous verrez principalement le haut de vos images, je les traiterais donc comme vos en-têtes.
Voici un exemple d'images d'arrière-plan True Parallax en haut, au milieu et en bas de la page.
Ce type d'image d'un pont fonctionne bien car il a un joli point focal sur le côté et le bas de l'image n'est pas aussi important que le haut, donc le message n'est jamais perdu pour l'utilisateur.
Voici la même page utilisant la méthode CSS. Vous pouvez vraiment voir le fait que l'image d'arrière-plan est fixe et s'étend à la fenêtre du navigateur. On dirait même que c'est la même image fixée en arrière-plan tout le temps.
Si vous n'êtes toujours pas satisfait après avoir recherché l'image parfaite, ajouté le rembourrage nécessaire et l'avoir recadrée, vous pouvez toujours recourir à un piratage.
Parallax Image Hacks : Modification de la position de l'image avec CSS personnalisé
Si vous souhaitez modifier la position du fond de parallaxe, vous pouvez utiliser le sélecteur css « .et_parallax_bg ». Voici le css par défaut qui positionne l'image pour l'effet de parallaxe.
.et_parallax_bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
Si vous remarquez, par défaut, la propriété de position d'arrière-plan pour la méthode de parallaxe css est la suivante est définie sur « top center ». Mais si je voulais changer la position d'origine de l'image d'arrière-plan, vous pouvez ajuster les valeurs de la propriété background-position.
Si vous souhaitez que votre CSS personnalisé soit condensé sur une certaine image et que cela n'affecte pas tout votre arrière-plan de parallaxe, vous devrez ajouter une classe à votre section afin que nous puissions identifier dans le CSS quel arrière-plan nous devons personnaliser.
Accédez aux paramètres de la section, sous l'onglet Avancé, et entrez une classe CSS appelée "parahacks".
Allez maintenant dans Paramètres de la page et sélectionnez l'onglet Avancé.
Utilisez ensuite la zone CSS personnalisé pour saisir l'un des exemples suivants de CSS personnalisé :
Si vous utilisez la méthode CSS, vous pouvez centrer l'image d'arrière-plan verticalement en ajoutant le css personnalisé suivant :
.parahacks .et_parallax_bg {
Background-position: center center !important;
}
Pour aligner l'image d'arrière-plan en bas, ajoutez le css personnalisé suivant :
.parahacks .et_parallax_bg {
background-position: bottom center !important;
}
Pour faire remonter l'image d'arrière-plan d'un certain nombre de pixels, ajoutez le css personnalisé suivant :
.parahacks .et_parallax_bg {
background-position: center -150px !important;
}
Si vous utilisez la méthode True Parallax, vous devez tenir compte des 220 pixels supplémentaires (plus ou moins en fonction de la hauteur de votre navigateur) de l'image cachée en bas. Pour que l'image d'arrière-plan soit plus centrée verticalement, vous devez ajuster la propriété background-position en utilisant une valeur de pixel négative comme ceci :
.parahacks .et_parallax_bg {
background-position: center -100px !important;
}
Pour aligner davantage l'image d'arrière-plan en bas, ajoutez le css personnalisé suivant :
.parahacks .et_parallax_bg {
background-position: center -220px !important;
}
TL ; DR ? Voici un résumé vidéo des principaux points
Abonnez-vous à notre chaîne Youtube
En clôture
J'espère sincèrement que ce guide a été utile pour acquérir une compréhension approfondie du fonctionnement de la parallaxe avec Divi. Heureusement, Divi fait presque tout le gros du travail en nous fournissant une fonctionnalité de parallaxe. La méthode CSS et la méthode True Parallax créent toutes deux de superbes effets réalistes prêts à l'emploi. Cependant, c'est à nous de trouver les bonnes images et de les modifier juste pour les faire fonctionner pour notre site. Fonce! Je parie que vous allez créer quelque chose d'incroyable.
Au plaisir de vous entendre dans les commentaires.
À votre santé!