L'effet Parallax ou Parallax Scroling est un effet d'animation qui permet de figer une image en fond pour ensuite faire défiler des contenus sur cette image. Cela donne donc un effet de profondeur.

Pour en savoir plus :

Qu'est-ce que l'effet parallax ?

Exemple

Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Mise en œuvre

1 - Insérer un bloc "Couverture" dans votre article ou votre page.


Vous pouvez vous aider de l'outil de recherche intégré dans Gutenberg pour trouver le bloc "Couverture"

Votre couverture apparaît et attend vos prochaines instructions

2 - Insérer votre image dans ce bloc.

Attention

Il faut de préférence une image de grandes dimensions pour qu'elle ne soit pas pixelisée à l'affichage.

De même, l'image doit garder sa taille originale (non redimensionnée par l'éditeur Gutenberg) si vous avez transformé cette dernière en couverture.

3 - À droite, dans les paramètres du bloc "Couverture", cocher "Fixed background" ("Arrière-plan fixe" en français).


Une fois votre image téléchargée ou sélectionnée dans la bibliothèque, il vous faudra la "fixer"

4 - Ajouter ensuite le contenu qui devra défiler sur votre image en cliquant sur "Write title" ("Écrire le titre" en français) au centre de celle ci

5 - Si besoin, vous pouvez modifier le paramétrage de ce bloc "Paragraphe".

6 - Ajouter d'autres blocs de contenus si nécessaire.

Parallax pleine page

Pour obtenir votre image en parallax sur toute la largeur de la page, cliquez sur l'option "Pleine largeur" dans l'encart "Mise en page".

Garder le contenu au centre de la page si besoin

La particularité de ce mode "pleine largeur" est qu'il vous faudra placer la classe "container", si vous le souhaitez, À TOUS VOS GROUPES présents sur la page dont le contenu doit rester centré (vous pouvez consulter l'article sur la création d'un groupe).


Pour centrer vos textes en mode "pleine largeur", ajoutez la classe "container" à vos groupes

L'image "Parallax" prendra ainsi toute la largeur après l'enregistrement. Les textes seront contenus dans des blocs avec des marges gauche et droite identiques.

Optimisation des images

Afin d'afficher sur votre site des images les plus "légères" possible sans altérer la qualité du rendu de celles-ci, voici 2 liens vers des sites qui vous permettront d'optimiser vos images en ligne.

  • TinyPNG : pour réduire le poids de vos fichiers images (compression)
  • iLoveIMG : pour compresser et faire d'autres manipulations si besoin (redimensionner, croper, etc.)

Un exemple de fichier optimisé


Le fichier d'une image de 3080x2144 pixels avec une résolution de 300 dpi pèse 3005677 octets.

Après optimisation de la compression de ce fichier sur l'un des sites ci-dessus, il ne pèse plus que 292 013 octets, c'est à dire 10 fois moins, sans perte de qualité.