模仿漫威介绍的图像序列动画

Question

我想创建一个动画来模仿 Marvel comic intro，但使用我自己的图像。我不确定将动画创建为视频并将其嵌入到我的网页中是否更好，或者我是否可以使用 jQuery/Velocity 来实现这种效果？

如果这个问题太模糊或对很多人没有用，我提前道歉，但我正在努力通过 Google 搜索找到解决方案。

在此先感谢help/direction。

Answer 1

对于任何感兴趣的人，这就是我如何接近我想要的，基于此 fiddle：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>

模仿漫威介绍的图像序列动画

Image sequence animation to mimic Marvel intro

jquery

animation

velocity

image

sequence