画像シーケンスアニメーションをマーベルイントロに模倣する

Question

Marvel comic introを模倣するアニメーションを作成したいと思いますが、自分の画像を使用しています。私はビデオとしてアニメーションを作成し、それを私のWebページに埋め込む方が良いかどうか、あるいはjQuery/Velocityを使ってこの効果を得ることができるかどうかはわかりません。

この質問があまりにもあいまいであるか、多くの人にはあまり使われていない場合は事前にお詫びしますが、私はGoogleの検索で解決策を見つけるのに苦労しています。

ご協力いただきありがとうございます。興味がある人のため

Answer 1

、これは私がこのフィドルに基づいて、私が望んでいたものに近い達成する方法である：http://jsfiddle.net/ddrace/DJuV7/1/

#intro { 
position: relative; 
margin:auto; 
top: 50px; 
right: 0; 
bottom: 0; 
left: 0; 
height: 600px; 
width:800px; 
background: #fff; 
} 

#intro div { 
    position: absolute; 
    top: -360px; 
} 

<script> 
    $(function() { 
     $('.image-sequence').hide(); 

     var pause = 200; 
     var motion = 300; 

     var quotes = $('.image-sequence'); 
     var count = quotes.length; 
     var i = 0; 

     setTimeout(transition, pause); 

     function transition() {     
      quotes.eq(i).animate({ opacity: 'toggle', top: '0' }, motion); 

      i++; 

      if (i == count) return; 

      setTimeout(transition, pause); 
     } 
    }); 
</script> 

<div id="intro"> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-1.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-2.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-3.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-4.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-5.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-6.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-7.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-8.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-9.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-10.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-11.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-12.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-13.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-14.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-15.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-16.jpg"> 
</div>