보기로 스크롤할 때 CSS3 애니메이션을 트리거하는 방법은 무엇입니까?

콘텐츠가 스크롤될 때 CSS3 애니메이션을 활성화하는 방법

문제

CSS3 애니메이션을 사용하여 막대 차트에 생기를 불어넣고 있지만 페이지가 로드되는 순간 애니메이션이 시작됩니다. 막대 차트는 이전 콘텐츠로 인해 화면 밖에 배치되므로 사용자가 스크롤을 내려 보는 순간 애니메이션이 완성됩니다.

해결책: 스크롤 이벤트 캡처

핵심은 캡처에 있습니다. JavaScript 또는 jQuery를 사용하는 스크롤 이벤트. 스크롤할 때마다 코드는 막대 차트 요소가 뷰포트 내에 있는지 확인합니다. 요소의 가시성이 감지되면 애니메이션을 시작하는 "시작" 클래스를 추가하여 애니메이션을 트리거합니다.

코드 구현

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 < viewportBottom) && (elemBottom > 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();
});

위 내용은 보기로 스크롤할 때 CSS3 애니메이션을 트리거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!