セクションごとの遅延アニメーション

Question

I各アイコンの間に遅延を付けて画面上のアイコンをアニメートするこのスクリプトを作成します。

スクリプトはうまく動作しますが、常に同じ遅延で画面上の各アイコンをアニメーション化します。

問題：

私はすべてのアニメーションを終了する10秒を持っています画面上の10個のアイコンを持って-if - しかし、私は、画面上の200個のアイコンを持っている場合、私は終了する200Sが必要になります...（多くの時間私は

画面上のアイコンの数に従って遅延を制御する方法を必要とするもの）

を待ちます。

OR（私は各セクションにどのように多くのアイコンを知っているので）部による遅延を制御する方法

例：セクションのソリューションで

：私は10個のアイコンがある - それぞれについて、その後1秒の遅延をアイコンは合計10秒になります。

セクション内のクライアント：100個のアイコンがあります。各アイコンの1秒の遅延が100秒になります。ここで、すべてのアニメーションを高速化するために10msのような「カスタム遅延」が必要です。

（私はJSの初心者です）

var $animation_elements = $('.animation-element'); 
var $window = $(window); 

const MULTIPLIER = 800; //millis 

var countInView = 0; 
var timeouts = []; 
for (i = 0; i < $animation_elements.length; i++) 
    timeouts[i] = []; 


function check_if_in_view() { 
    var window_height = $window.height(); 
    var window_top_position = $window.scrollTop(); 
    var window_bottom_position = (window_top_position + window_height + 15); 

    for(var i=0; i < $animation_elements.length ; i++) { 
    var $element = $animation_elements.eq(i); 
    var element_height = $element.outerHeight(); 
    var element_top_position = $element.offset().top; 
    var element_bottom_position = (element_top_position + element_height); 


    //check to see if this current container is within viewport 
    if ((element_bottom_position >= window_top_position) && 
     (element_top_position <= window_bottom_position)) { 


     // If is icon and it wasn't already in view range(in-view). 
     if($element.is($('i').parent()) && !$element.hasClass('in-view')) { 
     var delay = MULTIPLIER * ++countInView; //adds +1 

     //Pause animation. 
     $element.addClass('paused'); 
     // Clojure for passing outer values to timeout 
     (function(delay, $element, savedtimeout){ 
      // Keeps a reference of the timeout to remove it later. 
      savedtimeout[i][0] = setTimeout(function() { 
      //Start animation 
      $element.removeClass('paused'); 
      countInView--; 
      }, delay); 
     }(delay, $element, timeouts)); 
     } 
     $element.addClass('in-view'); //always 
    } else { 

     // If element wasn't already in view range(in-view). 
     if($element.hasClass('in-view')) { 
     $element.removeClass('in-view'); 
     } 
     if($element.hasClass('paused')) { 
     if(timeouts[i][0] != null) { 
      //Removes the timeout from the queue 
      clearTimeout(timeouts[i][0]); 
      countInView--; 
     } 

     $element.removeClass('paused'); 
     } // end if 

    } // end if 
    } // end for 
} 
$window.on('scroll resize', check_if_in_view); 
$window.trigger('scroll'); 

Answer 1

アイコンの親セクションを見つけるためにjQuery parent（）を使用し、それに応じて遅延を設定することができます。

<div class="section"> 
    <i class="animation-element"></i> 
    <i class="animation-element"></i> 
    <i class="animation-element"></i> 
    <i class="animation-element"></i> 
</div> 
<div class="section"> 
    <i class="animation-element"></i> 
    <i class="animation-element"></i> 
    <i class="animation-element"></i> 
    <i class="animation-element"></i> 
    <i class="animation-element"></i> 
</div> 

次に、あなたはこれがあなたのために、結果としてあなたに4 & 5を与える、$('.section .animation-element').lengthを使用することができます：あなたが構造を以下している想像し

var $elementParentSection = $animation_elements.parents('.section-class-name'); 

if($elementParentSection.hasClass('.section-class-name')) 
    delay = 10; 

Answer 2

：

はhttp://www.w3schools.com/jquery/traversing_parents.asp

例を参照してください。最初に4 .animation-elementがある第2セクションにおいて210 である。

その後あなたがこの使用することができます：あなたの遅延としてnumber of .animation-elementを、私はあなたがdata attribute（例のために追加することができ、あなたの全体のコードを再書き込みしたくないところで場合N * 1 = N :)

ので、* 1s無視します。 data-number-of-icons）その後、check_if_in_viewであなたのfor loonに、あなたはこのようなdata attributeにアクセスすることができ、（.section秒にこれを追加）各セクションのアイコンの数を保持する：

var delay = $element.closest('.section').data('number-of-icons'); 

・ホープこのヘルプ。

更新

私たちの会話&あなたjsfiddleに基づいて、解決策は次のようになります：あなたはMULTIPLIERを変更する必要が
アイコンの数に依存。 1 to 10アイコンの場合、MULTIPLIER = 250、10 to 50アイコンの場合、MULTIPLIER = 100などとなります。上記のソリューションを使用してicon's countを取得することができます。