Comment déclencher des animations CSS3 lors du défilement dans la vue ?

Comment activer l'animation CSS3 lorsque le contenu défile dans la vue

Problème

Vous utilisez des animations CSS3 pour donner vie à un graphique à barres, mais l'animation démarre au moment du chargement de la page. Comme le graphique à barres est placé hors écran en raison du contenu précédent, l'animation est terminée au moment où les utilisateurs font défiler vers le bas pour l'afficher.

Solution : capturer les événements de défilement

La clé réside dans la capture faites défiler les événements à l'aide de JavaScript ou de jQuery. À chaque défilement, le code vérifiera si l'élément du graphique à barres se trouve dans la fenêtre. Une fois qu'il détecte la visibilité de l'élément, il déclenche l'animation en ajoutant une classe "start" qui lance l'animation.

Implémentation du 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) {
    var $elem = $(elem);

    // Get scroll position
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get element position
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop  viewportTop));
}

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

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

    if (isElementInViewport($elem)) {
        $elem.addClass('start');
    }
}

// Capture scroll events
$(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!