Qu'est-ce qu'un effet Parallax ?
Difficulté : ★☆☆☆☆ très facile
Prérequis : utiliser un thème prédéfini compatible smartphones et tablettes
C'est un effet assez courant sur le net, vous l'avez déjà sûrement vu : il s'agit de programmer certaines illustrations d'une page web pour que leur défilement soit désynchronisé par rapport au défilement des autres éléments de la page lors de l'utilisation de la molette de la souris par exemple.
À quoi ça sert?
Cette animation donne immédiatement un effet de profondeur et de modernité à votre site : les éléments défilent sur plusieurs dimensions, dynamisant vos illustrations et rendant la lecture de vos contenus plus ludiques.
D'un point de vue plus concret, on peut se servir de ces effets principalement :
- Pour accueillir un visiteur, avec à la fois une belle image et une phrase d'accroche,
- Pour séparer des contenus, des paragraphes ou des éléments d'une même page.
À quoi ça ressemble?
Vous pouvez consulter un exemple ici.
Comment insérer une image avec un effet Parallax sur mon site?
C'est très simple : lors de l'insertion d'un média, il vous suffit de choisir l'alignement Parallax ou Parallax plein écran pour activer l'effet.
- Rendez-vous dans l'administration de votre site OnlineCreation.me et identifiez-vous si ce n'est pas déjà fait,
- Cliquez sur
Rédaction du site, - Cliquez sur la page sur laquelle vous souhaitez insérer un effet Parallax,
- Cliquez sur
, - Double-cliquez sur une image,
- Choisissez Afficher l'image
- Dans les options d'insertion, choisissez l'alignement Parallax pour forcer un affichage réduit en hauteur (recommandé lorsque vous souhaitez séparer des éléments) ou Parallax plein écran pour forcer l'affichage plein écran (recommandé en écran d'accueil),
- Cliquez sur Insérer,
- Une fois l'image insérée, vous pouvez saisir un texte bref ou une accroche ; si la couleur du texte ne contraste pas suffisamment avec l'image ou si la lisibilité est mauvaise, n'hésitez pas à ajouter un fond au texte à l'aide du bouton
.
N'hésitez pas à tester l'effet, tant sur ordinateur que sur périphérique mobile (tablette ou smartphone).
Si vous ajoutez un effet parallax au début de votre page et si vous utilisez un menu horizontal, ajoutez le mot-clé [TransparentMenu] dans votre page pour rendre votre menu transparent.
Voir aussi : Où trouver des photos pour illustrer mon site ?