Défilement avec effet parallax dans la version 7.0

Dernière mise à jour le 7 juillet 2023

Consultez les paramètres de défilement avec effet parallax et les conseils pour résoudre les problèmes.

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.

Astuce

Pour produire un défilement avec effet parallaxe dans la version 7.1, utilisez des effets d’arrière-plan.

Voici un exemple de défilement avec effet parallaxe dans le template Burke :

parallax_scroll_download.gif

Avant de commencer

Pages prises en charge

Le défilement avec effet parallaxe est disponible sur les pages qui prennent en charge les bannières :

  • Pages Index (images d'arrière-plan derrière les sections des dispositions de pages)
  • Pages Disposition
  • Pages Boutique
  • 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 panneau Styles du site de la famille de templates Brine :

  1. Ouvrez le panneau Styles du site.
  2. Faites défiler la page vers le bas jusqu’à la section Principal : Superposition.
  3. Cochez l’option Activer l’effet parallaxe.
  4. Vous pouvez également cocher l’option Recadrage automatique de la parallaxe pour assurer un recadrage minimal.
  5. 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 mises en avant

Pour créer l’effet de parallaxe, ajoutez une image mise en avant à votre page ou section :

Si l’effet parallaxe ne s’affiche pas, assurez-vous qu’il est 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 :

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 automatique de la 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

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.

Défilement avec effet parallax dans la version 7.0