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

스크롤 시 CSS3 애니메이션 트리거

문제:

콘텐츠가 스크롤되기 전에 애니메이션 막대 차트가 로드되어 놓쳤다 animation.

해결책:

스크롤하여 보기 시 CSS3 애니메이션을 활성화하려면:

1. 스크롤 이벤트 캡처

스크롤 이벤트를 모니터링하는 JavaScript 또는 jQuery 이벤트 리스너를 구현합니다.

2. 요소 가시성 확인

각 스크롤 이벤트마다 해당 요소(막대형 차트)가 사용자 뷰포트에 표시되는지 확인하세요.

3. 애니메이션 시작

요소가 표시되면(예: isElementInViewport())이 true를 반환하는 경우) 적절한 CSS 클래스(예: "start")를 적용하여 애니메이션을 시작합니다. .

예 코드:

<!-- 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();
});

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