Effets visuels sur Showit : hover actions, scroll effects et animations Lottie
Un site Showit, ça peut être beau. Ou ça peut être vivant. La différence, c’est dans les détails : un effet de survol sur tes boutons, un fond qui scrolle à un rythme différent du contenu, une petite animation qui attire l’œil. Ces effets amorcent l’engagement avant même que ta visitrice ait lu une ligne de texte. Ce guide couvre les hover actions, les scroll effects et les animations Lottie.
Hover actions : l’interactivité au survol
La hover action, c’est ce qui se passe sur un élément quand la souris passe dessus. Elles fonctionnent sur tous les éléments éditables : textes, images, formes, icônes. Sur mobile, elles ne s’activent pas (pas de survol sur écran tactile), mais elles restent lisibles.
Configurer une hover action sur un élément
Sélectionne l’élément → onglet Hover dans le panneau de droite → Type → sélectionne Custom pour configurer une action propre à cet élément.
- Canvas Default / Page Default – applique l’action par défaut définie au niveau du canvas ou de la page. Utile pour appliquer un style uniforme à tous les éléments.
- None – aucune action au survol
- Custom – action personnalisée uniquement pour cet élément
Les réglages disponibles
- Opacity – transparence de l’élément au survol (0 = invisible, 100 = plein)
- Color – changement de couleur de l’élément au survol
- Time – durée de la transition en secondes (typiquement 0.2 à 0.5 sec)
- Spécifique au type d’élément – texte : taille de police, lettre-espacement, soulignement • forme : taille et couleur de bordure • image : uniquement opacity
Définir une action par défaut (Page Default ou Canvas Default)
Si tu veux appliquer la même hover action à tous les liens d’un canvas ou d’une page en un clic :
- Clique sur le nom de la page (panneau gauche) OU sur le canvas
- Onglet Hover → Type → Custom → configure les valeurs
- Sur chaque élément : règle Type sur Page Default ou Canvas Default pour qu’il hérite automatiquement
💡 Cas d’usage : active Canvas Default sur ton canvas de galerie ou ta grille de témoignages pour que tous tes blocs aient un effet d’opacité au survol sans avoir à tout configurer un par un.
Scroll effects sur les backgrounds : parallax, scroll et fixed
Quand tu utilises une image ou une vidéo comme fond de canvas, Showit te propose de contrôler comment ce fond se comporte au scroll. Ces effets sont accessibles dans l’onglet Canvas Background → Scroll Effect.
Les 3 options
- Scroll With Page (par défaut) – le fond scrolle normalement avec la page
- Parallax – le fond scrolle à une vitesse légèrement inférieure au contenu, créant un effet de profondeur. Très utilisé sur les sites de photographes et de créatifs.
- Fixed – le fond reste fixé pendant que le contenu passe devant. Effet cinématique, idéal pour une image forte qu’on veut garder visible en permanence.
<aside> ⚠️ ⚠️ L’effet Parallax ne fonctionne pas sur mobile. Si tu l’actives, ton fond mobile restera en Scroll With Page automatiquement – tu peux le splitter pour avoir des comportements différents.
</aside>
Drop shadows et gradients : les effets de style
Ombres portées (Drop Shadows)
L’ombre portée s’applique sur les images, formes, textes et PNG (fond transparent). Sélectionne l’élément → onglet Effects dans le panneau de droite. Tu contrôles la couleur, l’angle, la distance, le flou et l’opacité.
💡 Sur les images PNG avec fond transparent, l’ombre s’applique en suivant le contour de l’élément (pas le rectangle de la boîte) – effet professionnel immédiat sur des logos, signatures ou objets détournés.
Gradients
Le gradient (dégradé deux couleurs) est disponible sur les formes (onglet Shape Style) et les fonds de canvas (onglet Canvas Background). Un slider de rotation en bas de l’outil te permet d’orienter le dégradé dans n’importe quel sens.
Animations Lottie : du mouvement sans code
Une Lottie, c’est un fichier d’animation vectorielle léger (format .lottie ou .json) que tu peux ajouter directement sur tes canvases Showit. Contrairement à un GIF, une Lottie s’adapte à toutes les tailles sans pixelisation et reste légère pour le chargement.
Étape 1 : trouver et télécharger une Lottie
- Va sur lottiefiles.com/free-animations → crée un compte gratuit
- Cherche l’animation qui correspond à ton univers de marque → clique dessus
- Clique sur Download → dans l’éditeur, sélectionne dotLottie dans le panneau de droite → Download
Étape 2 : ajouter la Lottie dans Showit
Option la plus simple : glisse-dépose le fichier .lottie directement sur ton canvas Showit. Tu peux aussi passer par Add Element → Lottie depuis la barre du bas pour ajouter un espace réservé, puis le connecter à ton fichier via la Media Library.
Personnaliser ton animation
- Loop – l’animation tourne en boucle ou joue une seule fois
- Mode – Forward, Reverse, Bounce, Bounce Reverse
- Speed – vitesse de l’animation (1x = vitesse normale)
- + Customize – ajuste opacité, flou, ombre, border-radius, couleur de fond
Ce que tu peux faire maintenant
- Ajoute une hover action sur tes boutons principaux (type : Custom, color ou opacity + time 0.3s) – ça prend 2 minutes et rend le site immédiatement plus vivant
- Sur ton canvas hero (avec image de fond) : active l’effet Parallax pour un rendu premium en moins d’un clic
- Va sur LottieFiles, cherche une animation liée à ton domaine (fleur, étoile, caméra…) et glisse-la sur ton canvas d’accueil comme détail de marque