Qu’est-ce qu’un parallaxe ?
Un parallaxe consiste à animer plusieurs éléments sur une partie de votre site web, et de les faire se déplacer à des vitesses différentes. La vitesse de chaque objet peut être régler indépendamment, ce qui définie un style graphique bien particulier !
L’interaction de l’animation du parallaxe rend votre page sublime et donne à l’internaute, l’envie de parcourir la page. En scrollant votre section, les objets qui sont intégrés à votre parallaxe se déplaceront pour donner un effet de profondeur en 3 dimensions.
Qu’est-ce qu’un parallaxe ?
Exemple : Intégration d’un parallaxe
Pour mieux comprendre comment l’intégrer, voici l’exemple d’un parallaxe conçu très simplement en HTML5 et CSS3. Ce modèle de parallaxe vous servira pour améliorer votre webdesign !
Etape 1 : Définir une hauteur
Pour la première étape, il vous suffira de créer une section et de définir une hauteur.
<style></style>
Etape 2 : Définir une image
Ensuite, il vous faudra tout simplement sélectionner votre image, et l’exporter au bon format. Dans la plus part des cas, un parallaxe prends toute la largeur d’un écran. N’oubliez donc pas de sauvegarder votre photo dans une taille assez suffisante, afin de l’afficher en bonne qualité.
<style></style>
Étape 3 : Réaliser l'effet de défilement
<style></style>
Quelles sont les choses à retenir ?
Pas grand chose à retenir, car finalement, un parallaxe est très simple à créer ! Vous pouvez le faire en 3 étapes comme je vous l’ai montrer sur cet article ! Maintenant, il ne vous reste plus qu’à explorer les pistes et faire preuve d’imagination pour proposer une belle expérience utilisateur à vos visiteurs.
Également, il est possible de créer un parallaxe vidéo.
La vidéo sur le web est moins utilisé dans ce genre de cas, étant donné qu’elle suscite beaucoup plus de ressources que de simples images.
De plus, le parallaxe est interactif, utilisez-le pour des sections bien précises sur votre site ( et non pas, partout ).
Enfin, je vous conseille d’améliorer l’aspect du parallaxe, en fonction des couleurs de la charte graphique du site.
