Le système d'animations de Scale Theme avec 5 presets, 11 types d'animation, effet stagger, parallax et contrôle total par section. Toutes les animations sont performantes (60fps) et respectent l'accessibilite.
Système d'animations
Les animations donnent vie à votre boutique. Elles guident l'oeil du visiteur, créent une impression de qualité et rendent la navigation memorable. Scale Theme intègre un système d'animations complet, optimisé pour la performance (60fps, accélération GPU) et respectueux de l'accessibilité (désactivation automatique si le visiteur a active prefers-reduced-motion dans son système).
Activation et réglages globaux
Les animations sont activées par défaut. Vous pouvez les désactiver globalement ou ajuster leur comportement dans Paramètres du thème > Animations.
| Réglage | Type | Options | Défaut |
|---|---|---|---|
| Animations activées | Checkbox | Oui / Non | Oui |
| Preset | Select | Minimal / Modern / Dynamic / Elegant / Playful | Modern |
| Vitesse | Select | Fast / Normal / Slow | Normal |
Les 5 presets d'animation
Les presets definissent le caractère global de toutes les animations de votre boutique. Chaque preset configure automatiquement le type d'animation, l'intensité du mouvement, l'easing (courbe d'accélération) et le timing.
| Preset | Mouvement | Intensité | Sensation | Idéal pour |
|---|---|---|---|---|
| Minimal | Fondu uniquement | Tres faible | Discret, professionnel | Luxe, joaillerie, parfums |
| Modern (défaut) | Fondu + glissement vertical | Moyenne | Moderne, fiable | Usage général |
| Dynamic | Glissement rapide + rebond | Forte | Energique, sportif | Sport, gaming, électronique |
| Elegant | Glissement doux + zoom | Moyenne-faible | Raffine, soigne | Haute couture, bijoux, beauté |
| Playful | Glissement + rebond prononce | Forte | Fun, ludique | Jouets, cadeaux, confiseries |
| Preset | Distance de déplacement | Vitesse | Rebond | Opacite initiale |
|---|---|---|---|---|
| Minimal | 0 px (aucun) | Rapide | Non | 0 |
| Modern | 20-30 px | Moyenne | Non | 0 |
| Dynamic | 40-60 px | Rapide | Leger | 0 |
| Elegant | 15-20 px | Lente | Non | 0 |
| Playful | 30-50 px | Moyenne | Prononce | 0 |
Vitesse globale
La vitesse s'applique à toutes les animations de votre boutique et modifie la durée de chaque preset.
| Vitesse | Durée typique | Description | Quand l'utiliser |
|---|---|---|---|
| Fast | ~200 ms | Les éléments apparaissent presque instantanément | Boutiques avec beaucoup de contenu, navigation rapide, utilisateurs impatients |
| Normal | ~400 ms | Équilibré entre fluidité et rapidité | Usage général, recommandé pour la plupart |
| Slow | ~600 ms | Les animations sont plus contemplatives | Storytelling, pages editoriales, expériences immersives, peu de contenu |
Les animations disponibles par type d'élément
Quand vous choisissez le preset Custom pour une section, vous accedez au contrôle individuel de chaque type d'élément.
Animations de titres (Heading)
Les titres peuvent utiliser des animations spécifiques, y compris des animations de texte avancees.
Groupe Mouvement :
| Animation | Description | Effet visuel |
|---|---|---|
| Fade | Apparition en fondu | Le titre passe d'invisible a visible, sans déplacement |
| Slide | Glissement depuis une direction | Le titre glisse depuis le haut, bas, gauche ou droite |
| Wipe | Effet "essuyage" | Une bande révèle le titre progressivement, comme un rideau qui s'ouvre |
| Reveal | Révélation masquée | Le titre semble sortir de derrière un masque invisible |
Groupe Effets :
| Animation | Description | Effet visuel |
|---|---|---|
| Zoom In | Zoom avant | Le titre commence petit et grandit jusqu'à sa taille finale |
| Zoom Out | Zoom arrière | Le titre commence grand et rétrécit jusqu'à sa taille finale |
| Blur | Defocalisation | Le titre commence flou et se met au point progressivement |
| Elastic | Effet elastique | Le titre apparaît avec un rebond elastique |
Groupe Texte (exclusif aux titres) :
| Animation | Description | Effet visuel |
|---|---|---|
| Text Words | Mot par mot | Chaque mot du titre apparaît séparément, l'un après l'autre |
| Text Chars | Caractere par caractère | Chaque lettre apparaît individuellement avec un léger decalage |
| Text Mask | Masque de texte | Chaque ligne de texte est révélée par un masqué glissant |
Animations d'images
| Animation | Description | Usage recommande |
|---|---|---|
| Fade | Fondu simple | Universel, toujours élégant |
| Slide | Glissement directionnel | Pour les mises en page asymetriques |
| Wipe | Révélation par essuyage | Effet premium, revelations de produits |
| Reveal | Révélation masquée | Lancements de produits, effet de suspense |
| Zoom In | L'image grandit depuis 90% | L'effet le plus populaire pour les images produit |
| Zoom Out | L'image rétrécit depuis 110% | Effet cinématographique, idéal pour les heros |
| Blur | De flou a net | Effet photo professionnel |
Animations de contenu (Content)
Les éléments de contenu (paragraphes, descriptions, boutons, badges) sont animés en groupe.
| Animation | Description |
|---|---|
| Fade | Fondu simple |
| Slide | Glissement directionnel |
| Wipe | Révélation par essuyage |
| Reveal | Révélation masquée |
Animations d'items (grilles, listes)
Pour les sections qui affichent des listes d'éléments (grilles de produits, cartes, icônes), des animations supplémentaires sont disponibles.
| Animation | Description | Effet visuel |
|---|---|---|
| Fade | Fondu simple | Chaque carte apparaît en fondu |
| Slide | Glissement | Chaque carte glisse depuis une direction |
| Wipe | Essuyage | Chaque carte est révélée par un effet wipe |
| Reveal | Révélation | Chaque carte sort d'un masqué |
| Zoom In | Zoom avant | Chaque carte grandit depuis une taille réduite |
| Zoom Out | Zoom arrière | Chaque carte rétrécit depuis une taille agrandie |
| Blur | Defocalisation | Chaque carte passe de floue a nette |
| Elastic | Rebond | Chaque carte rebondit en arrivant |
| Flip | Retournement | Chaque carte se retourne comme une carte a jouer |
| Stagger 3D | Cascade 3D | Les cartes arrivent en 3D avec un effet de perspective |
Directions
Pour les animations qui supportent une direction (Fade, Slide, Wipe, Reveal), vous pouvez choisir d'ou l'élément arrive :
| Direction | Description |
|---|---|
| Up | L'élément glisse depuis le bas vers le haut |
| Down | L'élément glisse depuis le haut vers le bas |
| Left | L'élément glisse depuis là droite vers là gauche |
| Right | L'élément glisse depuis là gauche vers là droite |
Stagger (effet cascade)
Le stagger est l'un des effets les plus puissants du système d'animation. Dans les sections contenant des listes (grilles de produits, cartes de fonctionnalités, icônes), le stagger anime chaque élément avec un délai progressif, créant un effet de cascade élégant.
| Stagger | Delai entre les éléments | Effet |
|---|---|---|
| None | 0 ms (tous en même temps) | Tous les éléments apparaissent simultanément |
| Short | ~80 ms | Cascade rapide, les éléments arrivent presque ensemble |
| Medium | ~150 ms | Cascade visible, chaque élément est distinct |
| Long | ~250 ms | Cascade prononcee, chaque élément est bien séparé |
Easing (courbe d'accélération)
L'easing définit comment l'animation accéléré et decelere. C'est un détail subtil mais qui change complètement la sensation.
| Easing | Description | Sensation |
|---|---|---|
| Smooth | Acceleration et deceleration douces (ease-in-out) | Naturel, fluide, équilibré |
| Bounce | Deceleration avec rebond elastique | Ludique, energique, "springy" |
| Sharp | Deceleration rapide (ease-out prononce) | Précis, net, moderne |
Parallax
Le parallax crée un effet de profondeur où les images de fond se déplacent plus lentement que le contenu au scroll. C'est un effet classique du web design qui ajoute une dimension cinématographique à votre boutique.
Configuration globale
| Réglage | Type | Options | Défaut |
|---|---|---|---|
| Parallax active | Checkbox | Oui / Non | Non |
| Désactiver sur mobile | Checkbox | Oui / Non | Oui |
Configuration par section
Quand le preset Custom est sélectionné, chaque section propose également :
| Réglage | Type | Range | Défaut |
|---|---|---|---|
| Activer le parallax | Checkbox | Oui / Non | Non |
| Intensité | Range | 2-20% | 10% |
L'intensité contrôle a quel point l'image de fond se déplace par rapport au contenu. Une valeur faible (2-5%) crée un effet subtil. Une valeur haute (15-20%) crée un effet prononce.
Animation par section (mode Custom)
Chaque section de Scale Theme peut individuellement être configurée en mode Custom pour un contrôle total, indépendamment du preset global.
Options disponibles en mode Custom
| Réglage | Description |
|---|---|
| Animation du titre | Choisir l'animation spécifique du titre (fade, slide, wipe, reveal, zoom, blur, elastic, text words, text chars, text mask) |
| Direction du titre | Up, Down, Left, Right |
| Animation de l'image | Choisir l'animation spécifique de l'image |
| Direction de l'image | Up, Down, Left, Right |
| Animation du contenu | Choisir l'animation du contenu (textes, boutons) |
| Direction du contenu | Up, Down, Left, Right |
| Animation des items | Choisir l'animation des éléments de grille/liste |
| Direction des items | Up, Down, Left, Right |
| Vitesse | Fast / Normal / Slow |
| Stagger | None / Short / Medium / Long |
| Easing | Smooth / Bounce / Sharp |
| Parallax | Activer/désactiver par section |
| Intensité parallax | 2-20% |
Accessibilité
Scale Theme respecte automatiquement la preference système prefers-reduced-motion. Si un visiteur a active la réduction de mouvement dans les paramètres de son système d'exploitation (macOS, Windows, iOS, Android), toutes les animations sont automatiquement désactivées.
C'est un comportement par défaut qui ne peut pas être désactivé. Il garantit que votre boutique est accessible aux personnes sensibles aux mouvements.
Récapitulatif des recommandations
| Type de boutique | Preset | Vitesse | Stagger | Parallax |
|---|---|---|---|---|
| Luxe / Joaillerie | Minimal ou Elegant | Normal ou Slow | Short | Oui (subtil, 5%) |
| Mode | Modern ou Elegant | Normal | Short | Oui (10%) |
| Tech / Électronique | Modern ou Dynamic | Fast ou Normal | Short | Non |
| Sport / Fitness | Dynamic | Fast | Short | Oui (10%) |
| Alimentation / Bio | Modern | Normal | Medium | Non |
| Enfants / Jouets | Playful | Normal | Medium | Non |
| Art / Design | Elegant | Slow | Long | Oui (15%) |
| General / Debutant | Modern | Normal | Short | Non |
Prochaines étapes
- Animations (design) — Utilisation des animations dans les sections
- Transitions de page — Effets entre les pages
- Effets hover — Animations au survol
- Layout — Espacement et mise en page globale