Comment puis-je activer l'animation CSS3 uniquement lorsqu'un élément défile dans la vue ?

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

La requête soulève un problème où l'animation d'un graphique à barres s'active lors du chargement de la page, bien que le graphique soit positionné hors- écran. L'objectif est de déclencher l'animation uniquement lorsque le spectateur fait défiler vers le bas et que le graphique apparaît.

Capturer les événements de défilement

Pour y parvenir, JavaScript ou jQuery peuvent être utilisés pour surveiller les événements de défilement et déterminer quand l'élément entre dans la fenêtre. Une fois détectée, l'animation peut être initiée.

Dans le code ci-dessous, JavaScript est utilisé pour ajouter la classe "start" à l'élément lorsqu'il devient visible, ce qui déclenche l'animation :

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

.eighty.start {
    width: 0px;
    background: #aae0aa;
    animation: eighty 2s ease-out forwards;
}

function isElementInViewport(elem) {
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    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();
});

En mettant en œuvre cette solution, l'animation ne s'activera que lorsque le graphique à barres défile, offrant ainsi une expérience utilisateur plus engageante.

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!