在滾動的視口中按順序動畫元素

我有一個包含多行div的容器，我想按順序從左到右以及每個項目之間的短時間偏移進行動畫處理，但僅當該行處於滾動視口中時。我不想將它們分組到html中的行中，因爲這些項目每行需要4個項目，每行3個項目...基於屏幕大小。在滾動的視口中按順序動畫元素

我基本上要做到下面的代碼，但只在視口中，當向下滾動頁面，動畫在視口中ECT下一行的行...

$('.gallery-item').each(function(i){ 
    $(this).delay((i++) * 200).fadeTo(400, 1); 
});

看到效果我尋找實現在第一胎工作室採取掠奪工作頁 http://www.firstborn.com/work/featured

任何幫助將不勝感激。

來源

2016-02-10 three7studio

爲什麼不簡單地添加一行來檢查元素是否在視口之外？我們可以假設，在視口中的所有元素都視（希望）外的元素之前，所以你可以這樣做：

$('.gallery-item').each(function(i){ 
    if($(this).offset().top > window.innerHeight) 
     return false; 
    $(this).delay((i++) * 200).fadeTo(400, 1); 
});

我們乾脆取消了一次循環的元素是視域之外。如果你想這樣就做到了人的元素視窗內，無論其位置在流你甚至可以做一個仔細檢查：

$('.gallery-item').each(function(i){ 
    if( 
     $(this).offset().top < window.scrollTop + window.innerHeight 
     && $(this).offset().top + $(this).height() > window.scrollTop 
    ) $(this).delay((i++) * 200).fadeTo(400, 1); 
});

如果元素頂部是視內這將只執行，或者它的底部是。

來源

2016-02-10 17:00:38 somethinghere

選項1 - 僅加載最初位於視口中然後停止的div。在滾動中再次調用加載函數不會繼續加載後續的div。選項2不會觸發任何顯示 – three7studio

等待您詢問如何讓這種情況發生 - 就像您在scroll_中那樣，這是一個完全不同的問題。但是答案可能很簡單 - 你只需要標記完成並忽略它們（也許使用'：not'查詢並向已完成動畫的類添加一個類），然後在滾動中運行此腳本。 – somethinghere

hmmm ...也許從所有div上的一個「不可見」類開始，並且它在視口交換類中遍歷每個類到一個「可見」類，然後滾動再次觸發函數 – three7studio

在滾動的視口中按順序動畫元素

回答

相關問題