How to create Apple iPhone web page slide show effect

[gdebojyoti.mail96]

Hello.

Please have a look at the image slide on this page - http://www.apple.com/iphone/

Can anyone tell me how to achieve a similar effect?

Thanks in advance.

 

[essellar]

For the most part, it's just a matter of hiding all but one of the images loaded (using the CSS property display: none), then using JavaScript to cycle through the images, setting the display of the current image to "none" and the next image to block or "" (which sets the default display type for the element).

Apple is not using any transitions or other new properties, just good old-fashioned CSS 1 and JavaScript. You use your stylesheet to set the initial visibility conditions, then JavaScript to manipulate them thereafter with a delay (using setTimeout() or setInterval()).

Please try to keep in mind that most of this sort of thing is very discoverable—your browser should have a View→Source option, and most browsers have a set of developer tools either built-in or available as a plugin to let you easily view the JavaScript and style sheets. That's how most of us learned, using R&D (which, in the developer world, doesn't mean "Research and Development" as much as it does "Rob and Duplicate").

This is just about as easy as it gets, so please give it a shot before asking for cut'n'paste code. If you run into problems, we'll be glad to help, but this really is a very good place to get started on your own.

 

[gdebojyoti.mail96]

Thanks for the advice.

But the slide I am talking about is a bit different from most of the others I have seen so far.

In this case, the images seem to behave differently - they seem to be linked to one another.

For instance, in a particular image, there are two iPhone models (a black and a white). During transition to the next image, the black one moves up while the white one seems to shift to the right.

This feature is what makes the slideshow unique to me. How is this particular effect achieved?

I hope I could convey my message clearly..


Viewed from Firefox11 & Chrome in Windows 7

 

[essellar]

That's not what I'm seeing when I visit the page (using Chrome on XP and Win7 from Canada). However, that still doesn't keep you from doing a bit of R&D, does it?

 

[nathanielcjohnson1394]

I am seeing this as well. It is a very unique and awesome slide show.

When I go to the next slide, the black iPhone slides & fades to the left while the white iPhone goes to the left but stays with the next slide and the new text fades in.

I'm using Chrome on Windows 7 so we should be seeing the same thing.

This is definitely not only CSS1 and JavaScript. This is using a JavaScript library called Script.aculo.us and CSS3.

Apple is using CSS3 and transform properties for the transitions.

This isn't that easy to just copy and paste as their is many different elements and files involved in this, and you'll need to learn the library (along with traditional JS if you don't know it) in order to edit it according to your needs.

I have made a short screen recording showing you with developer tools in Chrome how the elements slide and move:

http://youtu.be/VFwCL9gktCY

I'm not sure why you're not seeing it.

All I can say is Apple is amazing.

 

[gdebojyoti.mail96]

Thank you for the pointers. I'll see what I can do.

 

[nathanielcjohnson1394]

Hey, I would just like to drop by and show you this link I just found -- it explains exactly how the iPhone 4S slideshow works, very very helpful:

http://johnbhall.com/iphone-4s/

As you can see, Apple is sliding the stuff around the page and most of it's hidden, sort of like CSS Sprites but much cooler.

 

[gdebojyoti.mail96]

@nathanielcjohnson1394: Thank you.

The demo looked best in Opera and Firefox 11.

In Chrome, the window was going black during the transitions.

In IE10, the transition was not shown. Slide directly jumped from one image to the next.

 

[nathanielcjohnson1394]

@nathanielcjohnson1394: Thank you.

The demo looked best in Opera and Firefox 11.

In Chrome, the window was going black during the transitions.

In IE10, the transition was not shown. Slide directly jumped from one image to the next.

You're welcome.

It works/looks fine for me in Chrome.

And I bet it wouldn't show in IE10, because they probably don't have all of the CSS3 transitions in IE yet (still).