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.
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.