Fixed Curtains Pattern

Layout patterns are great for initiating projects quickly, but the ones that provide a plethora of opinionated styles can become frustrating and overwhelming to remove when desired. I’d like to share a few examples and end with a free HTML layout pattern for you to help alleviate unwanted styling and get started on a template pattern quicker that I call “Fixed Curtains.”

In the Wild

While I was fumbling through Harry Roberts’ site I noticed I’ve seen his work view layout in the past. It’s a really great layout/effect using only CSS that I really admire because of it’s coding simplicity and the amazing feeling you get on scroll. Each panel is fixed in it’s own unique container using the background-attachment property that you can read more about here.


CSS Wizardry Curtain Effect

I’ve also seen this type of effect done before with JavaScript over at Vox Media. I initially thought Scott Kellum wrote the implementation, but come to find out Josh Laincz (Senior Designer @ Vox) used curtain.js. Fortunately, the effect still exists in the screenshot I captured below.


Vox Media’s Curtains Implementation

Here’s another example of the effect in it’s entirety by ESPN using the curtain.js library previously mentioned.

The Fixed Curtains Template

Here’s a free version in the Harry Roberts (and many others) style we looked at previously that’s available on CodePen. I’m also debating on creating a well made one for a paid price so I can actually feed myself during the day so stay tuned for updates. Until then you can grab the free version, follow the instructions and get to work faster!

See the Pen Fixed Curtains by Dennis Gaebel (@grayghostvisuals) on CodePen.1395

Fixed Curtains Template on CodePen

If you know of another library that can help achieve this type of effect quicker let us know in the comments or even spark a conversation about the pattern in general. Also feel free to give me a shout if you choose to use this pattern in your next project.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

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

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

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>

Comment Preview

  1. John Doe shouted this comment preview:
    2015/01/04