Comment créer un effet Parallaxe en CSS ?
Publié leVous voudriez créer une belle section sur votre site et attirer vos lecteurs ? Améliorez l’expérience utilisateur de votre site grâce à un parallaxe, développé en HTML5 et CSS3 ! Mais, comment faire pour créer ou intégrer un parallaxe ? Il est en faite très simple à réaliser ! Si vous souhaitez en savoir plus, lisez cet article.
Définition : 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.
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> .parallax { /* Spécifier la hauteur du parallaxe en PX */ min-height: 500px; } </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> .parallax { /* L'image que vous souhaitez utiliser */ background-image: url("img_parallax.jpg"); } </style> Étape 3 : Réaliser l'effet de défilement
<style> .parallax { /* Les infos CSS du parallaxe */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } </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.
Auteur Benabdelhak Kevin
Graphiste Freelance disponible 7j/7
En tant que passionné du webdesign, du graphisme et du référencement naturel, je partage des informations et vous propose des solutions pertinentes pour votre communication.
