Kích hoạt hoạt ảnh khung hình CSS3 khi nội dung cuộn vào chế độ xem

Question

Tôi đã cố gắng tìm ra cách tạo hoạt ảnh khi được cuộn vào chế độ xem nhưng ít hoặc không may mắn. Tôi tìm thấy một plugin JQuery "Waypoints" nhưng tôi thiếu các kỹ năng để sử dụng nó. Tôi đang cố gắng sử dụng các khung hình chính CSS3 để tạo hiệu ứng khi chúng được cuộn vào chế độ xem. Tôi đã thực hiện một bước đột phá và gần với những gì tôi muốn thực hiện nhưng nó không phải là khá nơi tôi muốn nó. Tôi có một lớp có tên "bounceinright" làm cho mục bị trả về ở bên phải của màn hình. Dưới đây là CSS cho rằng:

@-webkit-keyframes bounceinright { 
0% { 
    opacity: 0; 
    -webkit-transform: translateX(2000px); 
} 

60% { 
    opacity: 1; 
    -webkit-transform: translateX(-30px); 
} 

80% { 
    -webkit-transform: translateX(10px); 
} 

100% { 
    -webkit-transform: translateX(0); 
} 
} 

@-moz-keyframes bounceinright { 
0% { 
    opacity: 0; 
    -moz-transform: translateX(2000px); 
} 

60% { 
    opacity: 1; 
    -moz-transform: translateX(-30px); 
} 

80% { 
    -moz-transform: translateX(10px); 
} 

100% { 
    -moz-transform: translateX(0); 
} 
} 

@-o-keyframes bounceinright { 
-o-transform: translateX(2000px); 
} 

60% { 
opacity: 1; 
-o-transform: translateX(-30px); 
} 

80% { 
-o-transform: translateX(10px); 
} 

100% { 
-o-transform: translateX(0); 
} 
} 

@keyframes bounceinright { 
0% { 
    opacity: 0; 
    transform: translateX(2000px); 
} 

60% { 
    opacity: 1; 
    transform: translateX(-30px); 
} 

80% { 
    transform: translateX(10px); 
} 

100% { 
    transform: translateX(0); 
} 
} 

.bounceinright { 
display: none; 
} 

.bounceinright.start { 
-webkit-animation: bounceinright 1s ease-out forwards; 
-moz-animation: bounceinright 1s ease-out forwards; 
-ms-animation: bounceinright 1s ease-out forwards; 
-o-animation: bounceinright 1s ease-out forwards; 
animation: eigbounceinrighthty 1s ease-out forwards; 
display: block; 
} 

và sau đó tôi có một đoạn JQuery ít sẽ kích hoạt các hình ảnh động với lớp "bắt đầu" khi nó được cuộn để.

//////////////////////////////// 
//scroll events 
////////////////////////////////  
function isElementInViewport(elem) { 
var $elem = $(elem); 

// Get the scroll position of the page. 
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
var viewportTop = $(scrollElem).scrollTop(); 
var viewportBottom = viewportTop + $(window).height(); 

// Get the position of the element on the page. 
var elemTop = Math.round($elem.offset().top); 
var elemBottom = elemTop + $elem.height(); 

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

// Check if it's time to start the animation. 
function checkAnimation() { 
    var $elem = $('.row .wpb_content_element'); 

    // If the animation has already been started 
    if ($elem.hasClass('start')) return; 

    if (isElementInViewport($elem)) { 
     // Start the animation 
     $elem.addClass('start'); 
    } 
} 

// Capture scroll events 
$(window).scroll(function(){ 
    checkAnimation(); 
}); 

vấn đề của tôi mặc dù là khi một mục với "bounceinright" được cuộn đến, nó gây nên TẤT CẢ các mục có cùng lớp. Tôi đã tự hỏi nếu có một cách để họ kích hoạt cá nhân nhưng với cùng một lớp. Bất kỳ trợ giúp sẽ được đánh giá cao.

Cảm ơn bạn!

Answer 1

Thay đổi của bạn checkAnimation() để

// Check if it's time to start the animation. 
function checkAnimation() { 
    var $elem = $('.row .wpb_content_element'); 

    $elem.each(function(){ 
     var $singleElement = $(this); 
     // If the animation has already been started 
     if ($singleElement.hasClass('start')) return; 

     if (isElementInViewport($singleElement)) { 
      // Start the animation 
      $singleElement.addClass('start'); 
     } 
    }); 
}