Les templates de la famille Brine appliquent un effet visuel particulier, appelé « défilement avec effet parallaxe », sur les images d’en-tête. Cet effet est produit par une image d’arrière-plan qui bouge plus lentement que le contenu situé à l’avant-plan, créant ainsi une illusion de profondeur et d’immersion.
La version 7.1 ne prend pas en charge le défilement avec effet parallaxe.
Voici un exemple de défilement avec effet parallaxe dans le template Burke :
Avant de commencer
- Pour savoir si votre template prend en charge le défilement avec effet parallaxe, consultez notre liste de templates dans la famille Brine.
- Lorsqu’il est activé, le défilement avec effet parallaxe est appliqué à toutes les bannières de votre site.
- Le défilement avec effet parallaxe fonctionne sur les appareils mobiles.
- La famille Marquee, qui n’est plus disponible, prend également en charge le défilement avec effet parallaxe. Pour en savoir plus, consultez le guide dédié à ce template.
Pages prises en charge
Le défilement avec effet parallaxe est disponible sur les pages qui prennent en charge les bannières :
- Pages d’index (images d’arrière-plan derrière les sections des pages Disposition)
- Pages Disposition
- Pages Produits
- Pages Événements
- Pages Album
- Pages Blog
- Pages Galerie
Activer ou désactiver le défilement avec effet parallaxe
Si l’effet parallaxe ne semble pas s’appliquer aux bannières de votre site, activez-le dans le menu Style du site de la famille Brine :
- Dans le Menu principal, cliquez sur Design, puis sur Styles du site.
- Faites défiler la page vers le bas jusqu’à la section Principal : Filtre.
- Cochez l’option Activer l’effet parallaxe.
- Vous pouvez également cocher l’option Recadrage Auto Parallaxe pour assurer un recadrage minimal.
- Cliquez sur Enregistrer.
Pour désactiver le défilement avec effet parallaxe sur votre site, suivez ces mêmes étapes en prenant soin de décocher l’option Activer l’effet parallaxe
Ajouter des images miniatures
Pour créer un effet parallaxe, ajoutez une image miniature à votre page ou section :
- Une miniature ajoutée à une page crée une bannière
- Une miniature ajoutée à une section de contenu d’index crée une image d’arrière-plan.
Si l’effet parallaxe ne semble pas s’afficher, vérifiez qu’il est bien activé.
Renforcer l’effet
Vous pouvez renforcer l’effet parallaxe lors du défilement de plusieurs façons.
En mélangeant les types de contenus
Associez des images avec effet parallaxe à des éléments et des images qui ne seront pas affectés par cet effet. Lors du défilement, ces derniers bougeront plus rapidement que les images avec effet parallaxe et sembleront glisser.
Par exemple, dans un index, vous pouvez associer des sections de contenu avec défilement parallaxe à des sections d’index de galerie sans effet parallaxe, ou à des sections de contenu qui ne possèdent pas d’image d’arrière-plan.
En superposant du contenu
Pour renforcer l’effet parallaxe, vous pouvez également superposer du texte, des boutons et d’autres éléments de contenu sur votre image. Lors du défilement, ceux-ci bougeront plus vite que votre image, comme tout le reste de la page. Dans la famille Brine, vous pouvez ajouter ce type de contenu à l’aide de blocs :
- Bannières - Permet d’ajouter du contenu dans la zone intro.
- Sections de page d’index - Permet d’ajouter du contenu à la zone de contenu de la page.
Ajouter un filtre de couleur
Vous pouvez ajouter un filtre couleur à toutes les bannières de votre site à l’aide de l’option Couleur de superposition dans la section Principal : Superposition du panneau Styles du site.
Recadrage
Pour mieux comprendre la façon dont le recadrage affecte les images avec effet parallaxe, imaginez que votre site est une feuille de papier avec en son centre un découpage rectangulaire. Votre image se trouve sous cette feuille de papier et n’est visible qu’à travers cette ouverture.
Pour que la feuille de papier défile plus vite que l’image, il faut que l’image soit plus grande que cette ouverture. Ainsi, selon le sens de défilement, le haut ou le bas de l’image qui est caché dans la disposition de départ est révélé à mesure que la feuille est déplacée.
Par conséquent, compte tenu de la position de l’image avec effet parallaxe, les changements apportés au recadrage ou au point focal ne seront pas forcément perceptibles. Votre site est conçu de façon à ce que l’image dispose de marges latérales, afin que l’effet parallaxe soit optimal.
Astuce : cochez l’option Recadrage Auto Parallaxe dans le panneau Styles du site pour minimiser le recadrage latéral.
Problèmes de défilement
Si vous rencontrez des problèmes liés au défilement lorsque l’effet parallaxe est activé, il est possible que vous deviez réduire la taille de votre page. Il n’est pas rare que les navigateurs mettent du temps à charger une page avec défilement parallaxe, en particulier si son volume total est supérieur ou égal à 15 Mo. Si cela ne règle pas le problème, ou si cette solution n’est pas réalisable dans votre cas de figure, nous vous conseillons de désactiver l’effet parallaxe.