jQuery: Animated header

Question

I'm looking for a jQuery plugin that can help me with the following:

I have a list of images I want to use for my header but they are pretty big (height especially) and I don't want to resize them to fit my small header div.

What I'd want is a plugin that allows the images to start at the bottom of the div (or rather the top of the image at the top of the div) and move upwards so the entire image can be seen, and once up they are shown entirely (bottom of image at bottom of div) they should "blend" (opacity toggle or something alike) with the next image and thus create a continuous loop with all the images.

I've looked through several plugins but have never found one that can achieve what I'm looking for (maybe I'm asking for a tad too much) but my JS is not sufficient enough to build it myself.

Thanks!

EDIT: I've decided to go another direction based on alexteg's post, namely this:

            $('#header_img img').hide();
            $('#header_img img').each(function(i) {
                $(this).show().animate({
                    opacity: 1.0,
                    marginTop: '-=' + ($(this).height() - $('#header_img').height())
                }, 5000, function() {
                    $(this).animate({
                        opacity: 0.0
                    }, 1000).hide();
                });
            });

Now the only problem I'm having is that the first image triggers, and once it finishes it triggers the second but it also immediately triggers the next instead of it waiting till the entire animation is finished.

Now I know I could do this with the animation callbacks but I have no idea how to combine this with the each I'm doing to loop through my images. Ideally it would also continue looping (first image again after the last and so on) so if anyone has any idea, it's greatly appreciated!

Answer 1

The Cycle plugin can do the blending nicely. If you want the first image to be animated you could use .animate()-function with a callback that activates the cycle-plugin. You might need to hide all but the first image for the first animation, then show them and activate cycle-plugin.

For the cycle plugin you need to put the images like this:

<div id="header"> 
    <img src="images/header_1.jpg" width="900" height="250" /> 
    <img src="images/header_2.jpg" width="900" height="250" /> 
    <img src="images/header_3.jpg" width="900" height="250" /> 
</div>

You could then do something like:

$(document).ready(function(){
  $('#header img').hide();
  $('#header').animate({
    opacity: 1.0,
    marginTop: '-=250',
  }, 5000, function() {
    $('#header').cycle({
      fx:   'fade',
      speed:    3000,
      timeout:  7000
    });
  });
});

You then also need the initial CSS something like:

#header {
    height: 250px;
    overflow: hidden;
}

#header img:first-child {
    margin-top: 250px;
}

Of course you need to adjust all the names, sizes speeds etc. for your needs.

Answer 2

I love cycle, but I think this one might be more elegant for a header:

Nivo Slider from Dev7 http://nivo.dev7studios.com/

But use the CSS from alexteg and you can look into clipping as well

http://www.w3schools.com/CSS/pr_pos_clip.asp