Comment déclencher une animation CSS3 uniquement lorsqu'un élément défile dans la vue ?

Déclenchement d'une animation CSS3 lors du défilement

Problème :

Un graphique à barres animé se charge avant que le contenu ne défile, ce qui entraîne manqué animation.

Solution :

Pour activer l'animation CSS3 lors du défilement dans la vue :

1. Capturer les événements de défilement

Implémentez des écouteurs d'événements JavaScript ou jQuery qui surveillent les événements de défilement.

2. Vérifiez la visibilité des éléments

Pour chaque événement de défilement, vérifiez si l'élément (graphique à barres) est visible dans la fenêtre d'affichage de l'utilisateur.

3. Démarrer l'animation

Une fois que l'élément devient visible (par exemple, lorsque isElementInViewport()) renvoie true), lancez l'animation en appliquant la classe CSS appropriée (par exemple, "start") .

Exemple Code :

<!-- HTML -->
<div class="bar">
    <div class="level eighty">80%</div>
</div>

<!-- CSS -->
.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

<!-- jQuery -->
function isElementInViewport(elem) {
    // Calculate element and viewport positions
    // ...

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function checkAnimation() {
    $elem = $('.bar .level');

    // Prevent redundant animation start
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

$(window).scroll(function(){
    checkAnimation();
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!