Multi Image Slider

Apple's iMac page has an amazing slider on it.

It's your standard image slider, but开发者_StackOverflow it looks like it utilizes multiple images that appear at different times in a single slide.

Anyone have a link to a tutorial that explains how this was done? The effect has some serious wow factor.

Here's the link: http://www.apple.com/imac/

Notes on sliders:

• Use a plug-in system. There are many robust ones. If you are using jQuery, I recommend the cycle plugin. It is extremely customizable.
• The navigation circles at the bottom all use a sprite (means one image.) They then use background-position to display the proper portion of the image at one time.
• Use visual whitespace. One reason Apple's slider looks so good is because the elements aren't cramped. They have lots of room to breathe.

Notes on the previous/next images:

• Position an <a> on the side and have the actual contents wrapped in another tag. Apple used a <b> for this. I'd probably use a <span>. Use opacity to make it invisible.
• The <a> tag needs to cover a large area. You probably want to have it be 100% of the containers height, and be wide enough for the mouse to find it.
• The inner tag contains the text or image you will display. Apple wrote next for the text, but then uses a background-image and shifts the text off-screen with text-indent.
• Make inner tag visible when you hover on the <a>. Again, you'll use opacity for this.
• Uses CSS3 transitions for the fade-in/fade-out. Do some Googling to learn more about them.
• Use JavaScript to determine whether you should show the <a> at all. This comes built-in to many slideshow plug-ins. If you are using jQuery, I recommend the cycle plugin.

/*this will fade only the opacity property in .25 seconds for both in and out */
-webkit-transition: .25s opacity ease-out;
-moz-transition: .25s opacity ease-out;
transition: .25s opacity ease-out;

AnythingSlider is the closest thing I have found to apple's slider so far. It animates elements of each slide independently. Check out the FX demo.

http://proloser.github.com/AnythingSlider/demos.html