Animations au défilement - Documentation Magix CMS 4

Ce système permet d'animer l'apparition des éléments HTML de manière fluide lorsqu'ils entrent dans le champ de vision de l'utilisateur. Il repose sur une synergie entre le JavaScript natif et des classes utilitaires SCSS, offrant une performance optimale et un respect strict des préférences système de l'utilisateur.

1. Principe de base

Pour animer un élément, deux classes CSS doivent être systématiquement déclarées :

La classe déclencheur : animate-on-scroll (indique au script de surveiller l'élément).
La classe d'effet : Définit la direction ou le type d'apparition (ex: fade-up).

2. Référentiel des classes

Effets d'apparition

Classe	Description
`fade-up`	L'élément glisse vers le haut (recommandé pour le texte).
`fade-down`	L'élément glisse vers le bas.
`fade-left`	L'élément apparaît depuis la gauche.
`fade-right`	L'élément apparaît depuis la droite.
`zoom-in`	L'élément grandit progressivement depuis son centre.

Délais (Effet Cascade)

Utile pour décaler l'apparition de plusieurs éléments successifs (ex: une grille de cartes).

delay-1 : Retard de 0.15s
delay-2 : Retard de 0.30s
delay-3 : Retard de 0.45s
delay-4 : Retard de 0.60s
delay-5 : Retard de 0.75s

3. Exemples d'intégration

Élément simple (Hero Section)

Pour un titre ou une introduction qui doit capter l'attention dès le premier défilement.

<div class="animate-on-scroll fade-up">
    <h2>Bienvenue sur Magix CMS 4</h2>
    <p>Une architecture moderne pour des performances inégalées.</p>
</div>

Mise en page croisée (Image / Texte)

Pour dynamiser une présentation face à face. On utilise des directions opposées et un léger délai pour créer un mouvement harmonieux.

<div class="row align-items-center">
    <div class="col-md-6 animate-on-scroll fade-right">
        <img src="illustration.jpg" class="img-fluid rounded shadow" alt="Magix Interface">
    </div>
    
    <div class="col-md-6 animate-on-scroll fade-left delay-2">
        <h3>Innovation native</h3>
        <p>Découvrez comment la V4 réinvente la gestion de contenu.</p>
    </div>
</div>

Boucle Smarty (Grille dynamique)

Pour les listes de produits ou d'actualités, utilisez l'index de la boucle Smarty ($index) combiné au modulo pour distribuer automatiquement les délais sur chaque ligne.

<div class="row">
    {foreach $news_list as $index => $news}
        {* Distribution du délai (0, 1, 2, 3) pour une grille de 4 colonnes *}
        <div class="col-lg-3 animate-on-scroll fade-up delay-{$index % 4}">
            <div class="card h-100 shadow-sm">
                <img src="{$news.image}" class="card-img-top" alt="{$news.title}">
                <div class="card-body">
                    <h5 class="card-title">{$news.title}</h5>
                </div>
            </div>
        </div>
    {/foreach}
</div>

Le Zoom pour mettre en avant un élément

Cet effet est idéal pour attirer l'attention sur des éléments isolés et interactifs tels que les badges, les tableaux de prix ou les boutons d'appel à l'action (Call-To-Action).
L'animation zoom-in crée un effet de focus qui incite l'utilisateur à l'interaction.

<div class="text-center mt-5">
    <a href="/contact/" class="btn btn-primary btn-lg rounded-pill animate-on-scroll zoom-in">
        Contactez-nous aujourd'hui
    </a>
</div>

4. Bonnes pratiques

Moins, c'est mieux : N'animez que les éléments structurants. Une page où chaque caractère bouge nuit à la lisibilité et à la crédibilité de votre site.

Accessibilité (A11y)

Magix CMS 4 respecte les utilisateurs sensibles aux mouvements. Grâce à la directive SCSS @media (prefers-reduced-motion: reduce), les animations sont automatiquement désactivées si l'utilisateur a configuré son système en mode "mouvements réduits". Les éléments s'afficheront alors de manière statique et immédiate.

SEO et Performance

Contrairement aux anciennes méthodes basées sur le défilement constant, IntersectionObserver ne pèse pas sur le fil principal (main thread) du navigateur. Cela garantit un excellent score Core Web Vitals, même sur des pages riches en visuels.