Comment créer un effet de parallaxe dans Slider Revolution

Cet article fait partie de notre série en cours de didacticiels Slider Revolution. Vous pouvez trouver tous les articles de cette série dans notre guide complet de la révolution des curseurs.

La parallaxe est un effet populaire qui ajoute une impression de profondeur et de dynamisme au contenu visuel de votre site Web. Il existe de nombreux thèmes WordPress premium avec des effets de parallaxe intégrés et vous avez probablement vu l’effet des milliers de fois sur le Web. Mais vous vous êtes peut-être demandé comment cela a été fait. Aujourd’hui, nous allons parler de l’utilisation de l’effet de parallaxe dans les curseurs Slider Revolution.

Qu’est-ce que la parallaxe ?

La parallaxe peut être définie approximativement comme un effet dans lequel les éléments en arrière-plan et ceux au premier plan se déplacent à des vitesses différentes lorsque l’utilisateur fait défiler, créant une illusion de profondeur. Plus précisément, les éléments en arrière-plan sont configurés pour se déplacer plus lentement. Ci-dessous, vous pouvez voir un exemple de parallaxe de notre thème Aoki.

Effet de parallaxe dans Slider Revolution

Il existe différentes manières d’obtenir cet effet, et si vous travaillez déjà avec Slider Revolution, vous serez heureux d’apprendre que ce plugin contient les fonctionnalités requises pour créer une parallaxe.

Comment activer la parallaxe dans Slider Revolution

Tout d’abord, rendez-vous sur Slider Revolution et activer la parallaxe. Aller à Options générales du module > Au défilement > Fonctionnalités basées sur le défilement > Parallaxe et tournez le commutateur Parallax Enabled sur Au.

Activation de la parallaxe dans Slider Revolution

Le plugin propose un certain nombre de valeurs de profondeur différentes afin que vous puissiez choisir celle qui vous convient. Si la valeur que vous recherchez n’est pas ici, vous pouvez saisir la vôtre, comme indiqué ci-dessous.

Fonctionnalités basées sur le défilement

Comment ajouter de la parallaxe aux images d’arrière-plan

Pour ajouter l’effet de parallaxe à votre image d’arrière-plan, accédez à Options de diapositive > Sur défilement > Paramètres de parallaxe et 3D, et choisissez la profondeur préférée dans la liste déroulante.

Activation de la parallaxe dans Slider Revolution

Quand il s’agit de choisir la profondeur, il n’y a pas de règle d’or. Nous vous suggérons d’essayer différentes valeurs pour voir comment elles fonctionnent sur votre page. Différentes profondeurs créeront des effets différents, alors essayez-les tous jusqu’à ce que vous trouviez l’effet parfait pour votre page. Si vous n’avez pas envie d’expérimenter, ceux du milieu sont toujours un choix sûr.

En relation :  Comment modifier les paramètres de groupe sur Facebook sur mobile et ordinateur de bureau

C’est à peu près tout pour le fond.

Comment ajouter de la parallaxe aux calques

L’effet de parallaxe Slider Revolution n’est pas réservé uniquement aux images d’arrière-plan. Vous pouvez également l’utiliser pour les calques individuels à l’intérieur de votre curseur. Avec cet effet, vous pouvez donner à vos utilisateurs l’illusion qu’ils contrôlent des parties de votre curseur en déplaçant leur souris. C’est un effet vraiment soigné, et il est très facile à mettre en place.

Sélectionnez votre calque, allez dans le Options de calque > Au défilement > onglet Parallaxe et 3D, et choisissez le niveau de profondeur souhaité.

Ajout de parallaxe aux calques

Et c’est vraiment tout ce qu’il y a à faire. Le résultat sera la couche avec parallaxe qui s’active lorsque la souris se déplace.

En conclusion

Comme nous l’avons vu, qu’il s’agisse de calques individuels ou d’images d’arrière-plan, l’ajout de l’effet de parallaxe Slider Revolution est extrêmement simple. Gardez à l’esprit, cependant, que tous les curseurs n’ont pas besoin de parallaxe. Les curseurs très dynamiques avec beaucoup d’animations fonctionneront probablement mieux sans cet effet, car le résultat peut s’avérer trop chargé ou encombré de mouvements. Pour les curseurs simples, cependant, la parallaxe peut être exactement ce dont vous avez besoin pour pimenter votre page.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.