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.

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.

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!

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.