Mac Pro Deconstruction

Apple Mac Pro page deconstructed

June 13, 2013 • Web development17 Replies

Facebook132Twitter171Google+18LinkedIn12

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.

Zoom in HTML

View HTML Deconstruction

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

Introduction video sequence

Apple Mac Pro Deconstructed

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 &lt;video src=&quot;macpro_intro_desktop.mp4&quot;&gt; in the div#introcontainer is loaded first. After it finishes playing the &lt;video src=&quot;macpro_main_desktop.mp4&quot;&gt; 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

Apple Mac Pro Deconstructed

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

Apple Mac Pro Deconstructed

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.

Design and build better websites

Receive practical tips and awesome website deconstructions straight to your inbox. No spam, just the stuff you really want.

17 thoughts on “Apple Mac Pro page deconstructed

  1. Jon Williams

    Nothing about seeking the video in reverse?! That’s the part I was really interested in: mainly the codec and keyframe settings for the video that keep it from chugging.

    Reply
  2. erik

    Neat! gonna apply internally to remake something simular during fall/ during vacation :D

    Thank you for posting!

    Reply
  3. Mathew Porter

    Nice to see that done without me trawling source, good to see Apples sow progression to newer technologies in there markup.

    Reply
    1. Petr Tichy Post author

      I thought that this could save time to a lot of developers. Stay tuned for more deconstructions like this and thanks for the comment Mathew.

      Reply
  4. Riomar Mccartney

    Awesome deconstruction of the website! Thank you! I’m making a website atm so this is very helpful!
    But i was wondering : This page works perfectly on safari mobile browser on iOS, it plays the video smoothly and nicely, but other pages that has video in the “Background”, like the Kickstarter mobile page, well, on the mobile browsers they don’t work! The video doesn’t play for Safari mobile Browser.
    wondering why…

    Reply
    1. Petr Tichy Post author

      Hm hard to say why Kickstarter developers didn’t try to implement the video also on mobile phones.

      In general the video playback is very inconsistent across devices and browsers.

      When you also look at other things such as timeframes and budget, you need to make a decision whether the implementation on mobile devices is worth it. That might be the case for Kickstarter.

      Reply
  5. Maximilian

    I’m new to this sort of programming. Do you have any idea how they built the ‘scroll to continue’ function?

    Reply
    1. Petr Tichy Post author

      Hi Maximilian, clicking the “scroll to continue” basically animates the page to the first slide. It is a similar effect as I described in the “Scrolling down” section of the article.

      JavaScript then removes two classes “visible and show” from the “scroll to continue” container, which makes it disappear.

      Hope that helps.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>