CSS3動畫 - 如何讓不同的動畫到不同的元素上滾動

Question

我有一個關於上滾動着幹什麼CSS3動畫的問題..

我發現了一個代碼，顯示用戶向下滾動後的DIV元素：

<script type="text/javascript"> 

      $(document).ready(function() { 

     /* Every time the window is scrolled ... */ 
     $(window).scroll(function(){ 

      /* Check the location of each desired element */ 
      $('.hideme').each(function(i){ 

       var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
       var bottom_of_window = $(window).scrollTop() + $(window).height(); 

       /* If the object is completely visible in the window, fade it it */ 
       if(bottom_of_window > bottom_of_object){ 

        $(this).animate({'opacity':'1'},500); 

       } 

      }); 

     }); 

    }); 

    </script> 

我正在建設一個網站，其中一個將有大約5個不同的框，當用戶滾動到每個框時將顯示哪一個框。 但我的問題是，我如何使這些框內的動畫。敵人示例：在每個框中都有標題，內容和圖像。我如何讓所有元素都出現在對方之後，因爲使用此代碼，所有類元素都會一次顯示。 但我想，如果用戶向下滾動，首先出現tittle，然後是內容，最後是圖像。

然後當用戶滾動到下一個框時，同一個進程重複自身。

我使用了一些CSS3延遲，但在這種情況下，我不知道用戶需要多長時間才能向下滾動。

謝謝！

Answer 1

簡單。您首先必須確保標題，圖像和內容在他們自己的div之內。然後，你會做同樣的過程，但與個人divs的位置和高度，而不是。 Here is a jsFiddle

$(document).ready(function() { 
    $(window).scroll(function() { 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 
     $('.title').each(function (i) { 
      var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
      if (bottom_of_window > bottom_of_object) { 
       $(this).animate({ 
        'opacity': '1' 
       }, 500); 
      } 
     }); 
     $('.innerImage').each(function (i) { 
      var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
      if (bottom_of_window > bottom_of_object) { 
       $(this).animate({ 
        'opacity': '1' 
       }, 500); 
      } 
     }); 
     $('.content').each(function (i) { 
      var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
      if (bottom_of_window > bottom_of_object) { 
       $(this).animate({ 
        'opacity': '1' 
       }, 500); 
      } 
     }); 
    }); 
}); 

Answer 2

與.animate()的回調函數和.getBoundingClientRect()功能可能的解決方法：

HTML

<div style="height:1200px; background:#fef;">test</div> 
    <div class="hideme"> 
     <div class="title">title 1</div> 
     <div class="main">content 1 
      <img src="/favicon.png" /> 
     </div> 
    </div> 
    ... 
</div> 

JS

$(document).ready(function() { 
    $(window).on('scroll resize', function() { 
    var win_height = $(window).height(); 
    $('.hideme').each(function (i) { 
     var elem_pos = this.getBoundingClientRect(); 
     var title = $('.title',this); 
     var main = $('.main',this); 
     var images = $('img',this); 
     if ((elem_pos.top>win_height || elem_pos.bottom<0)) { 
     title.css('opacity',0); // hide title 
     main.css('opacity',0); // hide contents 
     images.css('opacity',0); // hide images 
     return true; // below or above viewport, continue 
     } 
     if (title.is(':animated') || main.is(':animated') || images.is(':animated')) { 
     return true; // continue 
     } 
     title.animate({ 
     'opacity': 1 
     }, 500, function(){ 
     main.animate({ 
      'opacity': 1 
     }, 500, function(){ 
      images.animate({ 
      'opacity' :1 
      },500); 
     }); 
     }); 
    }); 
    }); 
}); 

jsfiddle/fullscreen view