Question

我想创建一个模仿Marvel comic intro的动画，但是使用我自己的图像。我不确定将动画创建为视频并将其嵌入我的网页或者是否可以使用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>

用于模仿Marvel介绍的图像序列动画

1 个答案: