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.


  • On my iPad, i cannot see the effect you describe on that google site.
    – Uwe Keim
    Commented Mar 22, 2013 at 20:42

2 Answers 2


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.


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.

  • +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
    Commented Mar 22, 2013 at 18:41
  • Thanks! This is definitely a rare technique but it's helpful to see it documented and named somewhere. Commented Mar 22, 2013 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. Commented Mar 23, 2013 at 3:30

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.



  • 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
    Commented Mar 22, 2013 at 18:11
  • @obelia - thanks for the confirming comment, edited answer as I believe it is more accurate.
    – Josh Bruce
    Commented Mar 22, 2013 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. Commented Mar 22, 2013 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
    Commented Mar 22, 2013 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/… Commented Mar 22, 2013 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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