Créer des effets avec les masques

Les masques vous permettent de créer des effets visuels dynamiques et des transitions fluides pour vos images et contenus interactifs.

Qu’est-ce qu’un masque ?

Un masque agit comme une fenêtre qui contrôle quelle partie d’une image est visible. Contrairement au recadrage, le contenu derrière le masque peut être animé et révélé progressivement.

Pour apprendre à créer un masque, rendez-vous dans notre article sur les Images.

Effets et animations de masque

En combinant les masques et les états, vous avez le pouvoir de réaliser de nombreux effets.

La variété des effets vient du fait que vous pouvez jouer sur la taille du masque (expand, crop…) ou sur la taille de l’image derrière (zoom in…)

Effet d’agrandissement dynamique (Expand)

📌 Principe : l’image semble s’agrandir progressivement, en jouant sur la taille du masque.

Cas d’usage :

• Un panneau qui s’ouvre lorsqu’on clique
• Une carte interactive qui s’étend au survol
• Un menu éventail à la Louvrissime

Comment réaliser cet effet d’agrandissement dynamique (expand) ?

1. Définissez un masque initialement petit
2. Créez un nouvel état lié au premier état
3. Dans cet état, étendez la taille du masque
4. Ajoutez une action pour passer d’un état à l’autre et qu’il révèle plus de contenu progressivement
5. Utilisez la Durée pour affiner l’animation

Effet de zoom / dezoom (zoom in / zoom out)

📌 Principe : créer un effet d’animation en jouant sur la taille de l’image.

Cas d’usage :

• Une image qui zoom lentement pour révéler un détail
• Un bouton interactif (hover) qui s’agrandit au survol avant de revenir à sa taille initiale

Comment réaliser cet effet de zoom in-out ?

1. Pour cet effet, utilisez un composant Multi-état
2. Définissez un masque masque
3. Créez un nouvel état lié au premier état
4. Dans cet état, augmentez la taille de l’image derrière le masque (pour un effet de zoom in). Diminuez la taille pour un effet de zoom out.
5. Ajoutez une action pour passer d’un état à l’autre et qu’il révèle plus de contenu progressivement
6. Utilisez la Durée pour affiner l’animation

Effet de révélation progressive

📌 Principe : faites apparaître progressivement un élément en jouant sur la position ou la taille du masque.

Cas d’usage :

• Un texte qui se dévoile ligne par ligne
• Une image qui apparaît de bas en haut comme un rideau qui se lève

Comment réaliser cet effet de révélation progressive ?

1. Créez un masque et placez l’image/texte en dehors de sa zone visible
2. Créez un nouvel état lié au premier état
3. Dans cet état, étendez la taille du masque pour faire apparaître tout le contenu
4. Ajoutez une action pour passer d’un état à l’autre et qu’il révèle plus de contenu progressivement
5. Utilisez la Durée pour affiner l’animation

Effet de découpe animée

📌 Principe : Faire apparaître une image ou un texte à travers une forme animée.

Cas d’usage :

• Un titre qui apparaît en étant “découpé” par une forme circulaire
• Une image qui se révèle progressivement à travers un contour en mouvement

Comment réaliser cet effet de découpe animée ?

1. Créez un masque et placez l’image à sa position initiale
2. Créez un nouvel état lié au premier état
3. Dans cet état, déplacez l’image sans toucher au masque
4. Ajoutez une action pour passer d’un état à l’autre et qu’il révèle plus de contenu progressivement
5. Utilisez la Durée pour affiner l’animation