Déclencher une animation lorsqu'une zone devient visible en WebDev

Les interfaces utilisateur modernes des pages web sont souvent composées de plusieurs zones distinctes. Certaines de ces zones intègrent des animations qui se déclenchent lorsque l'utilisateur les fait apparaître à l'écran.

Dans cet article, nous allons voir comment implémenter ce type de fonctionnalité avec Webdev en utilisant le zoning et l'API Intersection Observer en JavaScript.

1. Utiliser le zoning de WebDev

Dans WebDev, commencez par organiser votre page en différentes zones en utilisant l'outil de zoning disponible dans la barre d'outils.

2. Ajouter un identifiant à la zone concernée

1. Faites un clic droit sur la zone à animer.
2. Accédez à la Description de la zone.
3. Dans l'onglet Avancé, ajoutez un attribut HTML :
   • Clé : id
   • Valeur : Zone3

3. Observer l'apparition de la zone avec JavaScript

Dans le code de chargement de la page, nous allons utiliser Intersection Observer pour surveiller la visibilité de la zone et déclencher l'animation lorsque celle-ci devient visible.

Code JavaScript :

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log("L’élément est devenu visible !");
            GoAnimation();
        }
    });
});

// Sélection de la zone à observer
const zone = document.getElementById('Zone3');
observer.observe(zone);

‍

4. Créer l'animation en WebDev

Une fois que l'API Intersection Observer détecte que la zone est visible, nous appelons une procédure GoAnimation() pour exécuter l'animation.

Code WebDev :

PROCÉDURE GoAnimation()

AnimationJoueSurPropriétéChamp(LIB_SansNom1, "Opacité", 0, 100, 4s, animAccélération)

AnimationJoueSurPropriétéChamp(IMG_SansNom1, "X", IMG_SansNom1..XInitial, 600, 2s, animAccélération)

‍

Conclusion

Avec cette méthode, vous pouvez facilement déclencher des animations lorsque l'utilisateur fait apparaître des zones de votre page WebDev. L'utilisation de l'API Intersection Observer garantit une détection performante sans impacter les performances de la page.

Expérimentez cette technique et apportez une touche dynamique à vos interfaces !

‍

‍

‍

‍