A few years before the Metro interface reached broader audiences through Windows Phone and Windows 8, Microsoft pioneered the Metro interface in the Zune app. The early versions of Metro, especially the one seen in Zune, was focused on typography. Currently, “metro interface” is associated with colorful, rectangular tiles:
Recreating the effect
I enjoyed the way Zune software looked and felt, and I wanted to create similar effect on my website
I liked the animation most when navigation flies in form one direction and the article flies in from another direction. The bottom half of the navigation, flies in from a little bit further source, and appears to be faster. Additionally, each of the navigation elements’ animation is delayed relatively to the previous element.
The origin and destination of movement are controlled by
paddingRight CSS properties. Fading is accomplished using the
The second part selects the navigation bar below the header and sets up its animation 30px to the right.
The code then continues to find each contained navigation element and individually animates it to full opacity and adding extra 10px of movement. Navigation elements are dound using
each method, and animation
delay increases for consecutive elements.
Final note on UX
@Honzie helped me improve the fly-in animation for the article content: he pointed me to Google’s Material Design which reminds that everything that moves should move for a reason, in order to mimic a physical object.
Hence, navigation left causes the article to fly in from the left side, and navigation right causes the article to fly in from the right side.
The origin and destination of animation are similarly controlled by
paddingRight CSS properties.
lastSectionId are global variables that control direction of animation, and they are set in methods that handle link clicks.
When changing articles (this causes the header to fly in from the left),
lastSectionId are both equal to
0 and therefore the content flies in from the right.