user3771918 user3771918 - 6 months ago 36
jQuery Question

Image sequence animation to mimic Marvel intro

I'd like to create an animation to mimic the Marvel comic intro, but using my own images. I'm not sure if it is better to create the animation as a video and embed that in my web page or if I can use jQuery/Velocity to achieve this effect?

I apologise in advance if this question is too vague or not of use to many people, but I am struggling to find a solution through Google searches.

Thanks in advance for any help/direction on this one.

Answer

For anyone who is interested, this is how I achieved close to what I wanted, based on this 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>