요소가 보기로 스크롤될 때만 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);

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

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