Mac Pro Deconstruction

Apple Mac Pro page deconstructed

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

42 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
    1. Shahmeer Salman

      I wanna make this type of animation by copying the code, but forgive my dumbness, i am new the HTML/CSS and i wanna do this weebly html editor. how do i load the video to play with html. i mean where? and ps: I DON’T HAVE ANY WEBSPACE

      Reply
  2. erik

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

    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
  6. Will

    Any idea how the site works on mobile devices? It seems too smooth for a gif, and a video shouldn’t load inline on mobile safari.

    Reply
    1. Petr Tichy Post author

      Hi Will, looks like there is a canvas object for each of the sections. On the canvas is then played a sequence of still images. Hope that helps. Cheers

      Reply
  7. Martin Milizia

    I was looking for indications for create a site such as the Apple Mac Pro page for a long time.
    Thanks for everything has been really helpful to read your post, now I can do it too!

    Reply
  8. Iwan

    Great article! Thank you for that. What i am wondering, is if the video (mp4) is also used when viewing on an ipad. When i inspect and emulate an ipad with chrome i see that they also used the mp4 video. Do you know if the mac pro site uses an mp4 on the ipad or perhaps a png sequence? If i am correct, auto-play html mp4 video isn’t available for ipad or iphone without user interaction, see (http://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad).

    Reply
  9. Timothy Seward

    any one know if someone is selling a theme like this so you can basically make a single product page.. a theme like this would be awesome for product launches..

    Reply
    1. Timothy Seward

      i found this site does almost the exact same thing with the video.. forward and reverse scroll.. even audio at certain points

      http://www.5emegauche.com/agence

      Reply
      1. Petr Tichy Post author

        Thanks for sharing this Timothy, I don’t know about a theme that lets you do a similar effects.

        It’s a quite unique effect that requires you to hand code everything for scratch.

        Reply
  10. Timothy Seward

    I am definitely going to make this into my new portfolio website in the near future.. i will hand code this forsure….

    Reply
  11. Jacob Morgan

    Any strong opinion as to why Apple did not use Sprite Mapping for the animation sequences? I feel using video is a clunkier feeling approach, whereas with Sprite Mapping you could have really smooth forwards and backwards animations controlled by scrolling.

    Reply
    1. Petr Tichy Post author

      Good question Jacob, do you have any handy resources on Sprite Mapping? Maybe other people reading this article might find it useful, myself included. Cheers Petr

      Reply
  12. Boris

    Great work Petr, after I saw Jacobs comment I did some searching (the first couple of results were perfect) and found the following:
    https://www.sitepoint.com/responsive-sprite-animations-imagemagick-greensock/
    It’s an easy implementation of the sprite method, should work fine with a video, alas I’m not sure a long video is suitable (MacPro is 49seconds long).
    In any case this tutorial plays well with the rest of your posts (ScrollMagic and GSAP).
    Greets.

    Reply
  13. Blair

    How does the site control mouse scroll events? When you scroll on the webpage, (using the Mighty Mouse on a MacBook Pro), a single swipe up switches down one section. How does it stop from simply scrolling down 3 sections or something?

    Reply
  14. GivranX

    Can you deconstruct this site?

    http://eng.getlost-getnatural.ru/

    Just the homepage
    *Just the scrolling on the homepage

    Reply
  15. Randy

    I am interested in the site’s menu on the right side…. is there a theme for this? a name this is called by? I like that as you scroll down, a new light glows for the next section on the page and that the name of that section appears.

    Any thoughts?

    Reply
  16. JohnnyTsui

    I want to know more abuout the new macbook pro-website’s ‘touchbar’ effect.Is it similar to this effect?

    http://www.apple.com/macbook-pro/

    I am really interested in it.

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.