Comment créer un effet parallaxe sur une boutique shopify
Ce tutoriel complet vous montre comment rendre fixe une image durant le scroll et ainsi donner un effet 3D à votre page web.
Dernière mise à jour
Cet article vous a-t-il été utile ?
Ce tutoriel complet vous montre comment rendre fixe une image durant le scroll et ainsi donner un effet 3D à votre page web.
Dernière mise à jour
Cet article vous a-t-il été utile ?
Le thème SHOPIWEB PREMIUM offre une large gamme d'outils de personnalisation pour votre site e-commerce Shopify. L’un des plus puissants est l’effet parallaxe de la section PARALLAXE DEFILANTE. Cet effet donne une impression de profondeur en faisant défiler l’arrière-plan à une vitesse différente de celle des éléments au premier plan. Dans cet article, nous allons vous guider à travers l’utilisation de la section PARALLAXE DÉFILANTE pour créer un site web moderne et engageant.
L’effet parallaxe est une technique de web design qui consiste à créer une illusion de profondeur grâce à un décalage de défilement entre différents calques visuels. Lorsqu'un utilisateur fait défiler la page, certains éléments se déplacent à une vitesse différente, ajoutant un effet de mouvement fluide et attirant. Cette technique est particulièrement populaire pour les pages d’accueil et les sections visuellement riches qui souhaitent capter l’attention.
Si vous aimez les effets d’animation du site Apple®, vous allez adorer la section PARALLAXE DÉFILANTE de SHOPIWEB PREMIUM. Pendant que l’utilisateur fait scroller son écran, l’arrière plan (image ou vidéo) reste fixe et des paragraphes avec titres défilent. Vous pouvez ajouter plus d’une dizaine de diapositives permettant de mettre en valeur votre copywriting. Il suffit de quelques minutes seulement pour personnaliser cette section no-code.
Accédez à l’éditeur de thème Shopify.
Cliquez sur « Ajouter une section ».
Sélectionnez la section Parallaxe Défilante dans la liste.
Cliquez sur « Ajouter » et la section apparaîtra immédiatement sur la page.
Votre image d’arrière-plan (image ou vidéo) est un élément clé de l’effet parallaxe. Pour obtenir un rendu optimal, suivez ces recommandations :
Taille de l’image : Assurez-vous que l'image a une résolution assez élevée (généralement autour de 1920 pixels de large) pour maintenir une bonne qualité sur les grands écrans.
Format : Les formats JPEG ou PNG fonctionnent bien pour les images de fond. Vous pouvez aussi utiliser des GIFs (images animées) et même une video pour un effet plus dynamique.
Les effets d’image : Ajoutez un effet bokeh grâce à l’option OVERLAY et il est aussi possible de flouter le visuel à l’aide du réglage FLOU.
L’effet de parallaxe va s’activer automatiquement lorsque vous ajouterez un slide. Seul ces éléments seront en mouvement pendant le défilement. L’arrière plan restera fixe.
Sous la section PARALLAXE DÉFILANTE apparaissent par défaut 3 slides (ou diaporama). Vous pouvez les supprimer en cliquant sur l'icône "Poubelle" situé à droite ou en ajouter d'autres en cliquant sur "Ajouter slide".
Pour personnaliser votre slide, sélectionnez-le pour voir apparaître les options de personnalisation. Vous pourrez ainsi ajouter le titre et le paragraphe qui défilera lors du défilement de l'utilisateur.
L'un des avantages de SHOPIWEB PREMIUM est qu'il est entièrement responsive. Cela signifie que l'effet parallaxe s’adapte automatiquement aux différents types d’écrans et de navigateurs, y compris les terminaux mobiles et les tablettes. Il est important de vérifier la prévisualisation sur mobile pour s'assurer que l'image et l'effet de parallaxe fonctionnent bien sur tous les terminaux, et ne ralentissent pas le temps de chargement de la page.
Le thème vous permet d’importer une image ou une vidéo spécialement conçu pour le format mobile. Pour réaliser un montage vidéo facilement et sans connaissance technique, vous pouvez utiliser l’outil Canva®. Ce même outil gratuit vous permet également de retoucher chaque image que vous souhaitez utiliser pour votre effet parallaxe. Canva® est beaucoup plus facile à utiliser que les outils de la suite Adobe Photoshop et Illustrator.
Images de fond : Choisissez des images avec une bonne luminosité et un contraste suffisant pour que le texte reste lisible. Si ce n’est pas le cas, vous pouvez ajuster l’opacité à l’aide du réglage OVERLAY et ajouter du flou avec FLOU.
SEO et performance : Assurez-vous que vos visuels sont optimisés pour le web afin de ne pas ralentir le temps de chargement. Utilisez des balises ALT appropriées pour améliorer votre référencement sur les moteurs de recherche. Ces balises sont particulièrement utiles pour les personnes mal voyantes utilisants un lecteur d’écran.
Effet bokeh : Si vous utilisez Photoshop ou un autre logiciel de retouche photo, vous pouvez ajouter un effet bokeh (flou artistique) sur votre image de fond pour mettre davantage en avant votre contenu. Et si vous ne voulez pas vous prendre la tête, le thème gère ces effets depuis les options OVERLAY et FLOU, ce qui est un gain de temps considérable.
Expérience utilisateur : Pour améliorer l’UX de votre site internet, l’effet parallaxe de la section SHOPIWEB PREMIUM effectue les transitions entre chaque diaporama d’une façon très fluide. Vos clients vont pouvoir découvrir les avantages de votre produit dans les meilleures conditions.
Félicitations, vous avez réussi à ajouter et personnaliser la section PARALLAXE DÉFILANTE du thème SHOPIWEB PREMIUM.
Cette fonctionnalité vous permet de donner vie à votre site internet en ajoutant de la profondeur et du mouvement à vos pages web. Que vous soyez un développeur expérimenté, un designer ou une graine d’e-commerçant, les options proposées dans ce thème vous permettent de personnaliser facilement votre site tout en offrant une excellente expérience utilisateur.
AVANT DE COMMENCER : Assurez-vous d'avoir une licence active installée sur votre boutique Shopify®. Si ce n'est pas le cas, .
