The Apple Worldwide Developers Conference (WWDC) held in San Francisco earlier this week introduced a few new Apple products and updates.

While the hugely expected iPhone 6 Nano with super narrow display hasn’t been revealed yet, the new iOS 7 caused a huge debate around the “flat” icons and updated UI design.

What stood out for me was the new Apple Mac Pro with its futuristic black design and a power house configuration. This futuristic product is also showcasing its features on a great looking website at www.apple.com/mac-pro/ which is full of interesting effects.

To better understand what is happening on the page, have a look at the simplified html page structure below.

View HTML Deconstruction →

Now lets have a look at how some of the fancy effects were created.

Introduction video sequence

There are two video files used on the page:

A short 4 second (1.4MB, Codec H.264, 2,700kb/s) intro and

A 49 second (19.5MB, Codec H.264, 3000kb/s) main video clip

<!-- On Page Load --> <div id="introcontainer"> <video src="macpro_intro_desktop.mp4"></video> </div> <div id="videocontainer"></div>

<!-- After Intro Playback --> <div id="introcontainer" style="display: none;"> <video src="macpro_intro_desktop.mp4"></video> </div> <div id="videocontainer" style="display: block;"> <video src="macpro_main_desktop.mp4"></video> </div>

The intro clip <video src="macpro_intro_desktop.mp4"> in the div#introcontainer is loaded first. After it finishes playing the <video src="macpro_main_desktop.mp4"> tag is injected into div#videocontainer which is then set to display: block , while the div#introcontainer is set to display: none .

div#introcontainer has a higher z-index and the last frame of the intro video is also the first frame of the main one, that means that you don’t see any transition.

Scrolling down

When you scroll down the page the main nav#globalheader fades out and moves up, thanks to -webkit-transform: translate3d(0, -20px, 0); .

<!-- Nav on page load --> <div id="navcontainer"> <nav id="globalheader" class="visible" style="opacity: 1; -webkit-transform: translate3d(0, 0px, 0);"> ... </nav> </div> <!-- Nav after scroll down --> <div id="navcontainer"> <nav id="globalheader" class="" style="opacity: 0; -webkit-transform: translate3d(0, -20px, 0);"> ... </nav> </div>

Selecting one of the sections in the side-navigation bar plays the video forwards or backwards to the appropriate time point. This is based on the data-seek-time attribute of the clicked li .

<ol class="list"> <li data-seek-index="1" data-seek-time="2" class="active">...</li> </ol>

The main navigation then fades in on the last “Later This Year” panel. Thanks to opacity set to almost 1 and visibility set to visible .

element.style { opacity: 0.9999999999999956; -webkit-transform: translate3d(0, 0px, 0); } #desktop .clip.visible { visibility: visible; }

Fade Out effect between panels

If you use the section navigation on the right side and jump further than the next or previous section, you will see a nice fade out and fade in effect. This is thanks to div#curtain .

All direct child elements of #wrapper are positioned absolute on top of each other and their individual z-index values take care of the visual order.

Curtain hidden HTML/CSS

<div id="wrapper"> <div id="navcontainer">...</div> <div id="introcontainer">...</div> <div id="videocontainer">...</div> <div id="stillcontainer">...</div> <div id="panelcontainer">...</div> <div id="curtain"></div> </div>

#curtain { height: 100%; width: 100%; background: #000; position: absolute; z-index: 30; opacity: 0; -webkit-transition: opacity 0.6s ease-out; -moz-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out; }

Curtain visible HTML/CSS

<div id="curtain" style="display: block" class="fadeOut"></div>

#curtain.fadeOut { z-index: 10000; opacity: 1; }

On navigation click the div#curtain is set to display:block and gets an additional class fadeOut . This class is then removed when the video in the background rewinds to the appropriate time, and a still image of that time point is displayed on top of the video.

These assets are shown in the overview image as two images in #stillcontainer with the class still still_1 clip . The current section image has an additional class of visible crossFade .

There are a total of 13 video overlay images img.still.clip , with a few section sharing the same image.

If you are still having trouble understanding the structure of the page layers, have a look at a more visual demonstration below.

View HTML Deconstruction →

Conclusion

I hope that this deconstruction answers some of your questions about how the Apple Mac Pro page was built.

As always, feel free to leave a comment or ask any questions below.

Enjoy responsibly.