Comment puis-je déclencher des animations CSS3 uniquement lorsqu'un élément défile dans la vue ?

Activation de l'animation CSS3 lorsque le contenu défile dans la vue

Lorsque la position d'un élément dépasse la fenêtre d'affichage, il devient masqué. Pour optimiser les performances, les animations CSS3 peuvent être lancées uniquement lorsqu'un élément apparaît dans la fenêtre. Ceci est particulièrement utile pour les éléments placés loin en bas d'une page avec un contenu substantiel au-dessus d'eux.

Pour y parvenir, nous utilisons JavaScript ou jQuery pour capturer les événements de défilement. Une fois qu'un événement de défilement est déclenché, le code vérifie si l'élément ciblé a défilé dans la fenêtre. Si tel est le cas, une classe d'indication est ajoutée à l'élément, invitant l'animation à démarrer.

Code Implémentation :

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);

    // Scroll position
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Element position
    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

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

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

    if ($elem.hasClass('start')) return;
    
    if (isElementInViewport($elem)) {
        $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!