Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

The Google Ventures website at http://www.googleventures.com/ has interesting functionality -- when you scroll down the page, the upper "masthead" stays fixed to the window but is slowly covered up by the content below.

This is somewhat similar to parallax scrolling, but usually that involves multiple layers moving at varying speeds. In this case only one piece is moving.

Is this an established design pattern that has been named and used elsewhere? The best name my team could think of is "tectonic plates" but I doubt that is common terminology.

Thanks!

share|improve this question
    
On my iPad, i cannot see the effect you describe on that google site. –  Uwe Keim Mar 22 '13 at 20:42
add comment

2 Answers

up vote 10 down vote accepted

For all practical purposes it is termed the "Collapsing Header Effect" (genius, right?) and you can find out more and how to implement it yourself here.

EDIT

The idea is fairly new as far as I know and its simply an "effect" rather than a pattern. I cant recall where else I have seen it but it is becoming more common.

The article will tell you that this effect is achieved using a fixed position header and a relative position content <div>. This creates the subduction effect you mentioned withtectonic plates.

I hope this helps answer your question.

share|improve this answer
    
+1 For the reference article...Don't we have enough names for the same concepts in this industry? Cinemagraph (animated gif) being my latest favorite. But, fair enough, and to each their own one what we call things. :) –  Josh Bruce Mar 22 '13 at 18:41
    
Thanks! This is definitely a rare technique but it's helpful to see it documented and named somewhere. –  Michael Histen Mar 22 '13 at 20:43
    
+1 for adding the edit so that the article's content is summarized and will still be here in case of link rot. –  3nafish Mar 23 '13 at 3:30
add comment

It's a variation on a fixed header/footer - however, instead of the header of footer remaining static while the content move under them, this execution has it the other way - wherein the header/footer remains static while the content flows over them.

Re: Parallax In animation terms it's multiplane animation but, for web (computer science) we call it parallax scrolling. The main difference between the two - besides name - is that with multiplane animation, the plates move while the camera remains stationary. In parallax, the camera moves (scrolling) and the plates move.


http://en.wikipedia.org/wiki/Multiplane_camera

http://en.wikipedia.org/wiki/Parallax_scrolling

share|improve this answer
2  
+1 Yes, it's basically a sticky header, but while most sticky headers are on top of the scrolling content, this one is underneath the scrolling content. –  obelia Mar 22 '13 at 18:11
    
@obelia - thanks for the confirming comment, edited answer as I believe it is more accurate. –  Josh Bruce Mar 22 '13 at 18:18
1  
Thanks guys! It is similar to a sticky header, but it doesn't do one of the main things a sticky header does, which is make site navigation constantly visible. –  Michael Histen Mar 22 '13 at 18:22
    
@MichaelHisten I disagree that part of the sticky header construct is to make the navigation stick, but to each their own. –  Josh Bruce Mar 22 '13 at 18:33
1  
Josh, not to get on a tangent, but I'm not sure how you can separate the concept a sticky header from navigation -- it seems the primary use case/argument in favor of making something sticky is because it allows quick access to navigation: uxdesign.smashingmagazine.com/2012/09/11/… –  Michael Histen Mar 22 '13 at 20:51
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.