ビューポートに入るときに要素のリストにイベントを追加する

Question

私はページ上に多くの要素を持っています。ビューポートの要素があるかどうかを確認する関数を使用します。しかし、特定の要素にイベントを追加する方法はありますが、すべてには適用できません。 codpen

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

 
function checkAnimation() { 
 
     var $newsArrowRight = $('.box .arrow'); 
 
//   for (var i = 0; i < $newsArrowRight.length; i++) { 
 
//   // if ($newsArrowRight.hasClass('fade-in-right-js')) return; 
 
//   if(isElementInViewport($newsArrowRight[i])){ 
 
//    console.log($newsArrowRight[i]); 
 
//    $newsArrowRight[i].addClass('fade-in-right-js'); 
 
//   } 
 

 
//   } 
 
     // $.map($newsArrowRight, function(e) { 
 
     // if (e.hasClass('fade-in-right-js')) return; 
 
     // if(isElementInViewport(e)){ 
 
     //  e.addClass('fade-in-right-js'); 
 
     // } 
 
     // }); 
 
     if ($newsArrowRight.hasClass('fade-in-right-js')) return; 
 
     // 
 
     if(isElementInViewport($newsArrowRight)){ 
 
      $newsArrowRight.addClass('fade-in-right-js'); 
 
     } 
 
     
 
    } 
 

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

.box { 
 
    height: 40vh; 
 
    width: 20vh; 
 
    background: green; 
 
    margin-bottom: 1rem; 
 
    position: relative; 
 
} 
 
.box .arrow { 
 
    position: absolute; 
 
    bottom: 0; 
 
    font-size: 20px; 
 
    color: white; 
 
    transform: translateX(-90px); 
 
} 
 
.box .arrow.fade-in-right-js { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    -webkit-animation: fade-in-right 1s ease-in-out; 
 
    -moz-animation: fade-in-right 1s ease-in-out; 
 
    -ms-animation: fade-in-right 1s ease-in-out; 
 
    -o-animation: fade-in-right 1s ease-in-out; 
 
    animation: fade-in-right 1s ease-in-out; 
 
} 
 
@-moz-keyframes fade-in-right { 
 
    0% { 
 
    transform: translateX(-90px); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    } 
 
} 
 
@-webkit-keyframes fade-in-right { 
 
    0% { 
 
    transform: translateX(-90px); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">Text</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">text</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">text</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">text</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">text</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">arrow</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">arrow</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">arrow</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">arrow</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">arrow</div> 
 
</div>

Answer 1

ソリューションは、UE $各codpen

function checkAnimation() { 
    var $newsArrowRight = $.find('.box .arrow'); 
    $.each($newsArrowRight, function() { 
     var element = $(this); 
     if (element.hasClass('fade-in-right-js')) return; 

     if(isElementInViewport(element)){ 
     element.addClass('fade-in-right-js'); 
    } 
    }); 
} 

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

です