Bringing a user’s eyes up to content in a non-intrusive way is a kind of a dream for every website owner. We are always looking for ways to draw attention to the message that we want to convey to our audience. Whether it is a promo page, personal portfolio, corporate portal or a travel blog, we need a small helping hand from dynamic solutions.
The goal is to enrich otherwise static content and meet the expectations of the modern world. And thanks to the passionate development community, we have quite a range of tools to make our dream come true. And one such viable and promising tool is the “curtain” effect. Much like in real life, where theatre drapes can create pleasurable anticipation for a play, the online curtain effect can warm up the audience and help increase their interest.
Used as an instrument for making the appearance of the entire website, a standalone section, or even baseline details of the interface exciting, it effectively contributes to the user experience. And, it is not something grandiose. It is just a small effect that can be built with the help of HTML, CSS, and JS. Anyone can benefit from it, and we are going to prove it with our collection of code snippets.
Basic Curtain Effects
Looking for something simple, yet fun? These examples are a great place to start.
Tom Hughes shows us the traditional way of adopting a curtain-like behavior in web projects. Here, you can see two panels that move in a horizontal direction. They slide apart to reveal the content underneath and return to the original state to hide the message. Everything is done with HTML and CSS – neat and clean.
This is another time-tested and widely-used curtain effect in our collection. Unlike the previous example, here, the curtain moves in the vertical direction, thereby revealing the content from bottom to top. While in the case of Tom Hughes, the effect is triggered by a mouse hover, here you need to scroll down to activate it.
Take a look at Curtain Scrolling by Julia Mitchelmore. Scrolling triggers the effect, much like in the previous example. However, this time, the panels move in a diagonal direction, revealing sections in a playful fashion. The idea is simple, yet inspiring and refreshing.
Another stop in our exploration of curtain effects is Ricardo Soto’s project. He has played with the rules of perspective to give the transition between sections a zest. Here, the solution borders with the flipping effect, resulting in an impressive outcome.
Okay, now it is time to play with shapes. While the majority of the solutions in our collection stick to sharp angles and straight lines, Sahil, the author of Radial curtain, prefers to use smooth curvy shapes.
His code snippet feels fresh and inspiring. We have seen this kind of transition effect in various modern websites, where it is used to enrich a hamburger menu. It is a perfect base for your experiments.
We are going to end this part of the roundup with Curtain animation by Egor. He has built the entire hero area around the curtain effect. Every detail of the section appears in an elegant manner. This is an excellent example that shows us how the concept benefits the average website.
Realistic Curtain Effects
The first thing that springs to mind when we discuss a realistic effect are traditional stage curtains or a piece of cloth that is hanging in your bedroom. Indeed, it comes in a variety of shapes, colors, and materials. However, the most dramatic of course is theater drapes that Tim Lamber has managed to reproduce in his CodePen project. Check it out below.
Named simply Curtains, the solution features a classic traveler curtain made in an iconic red color. It pulls back to open the main content and gets back in several seconds. Although this skeuomorphic version feels a bit outdated, it looks impressive without doubt. The vigilantly crafted behavior of the curtain is the star of the show here.
Unlike the previous example, Curtain Oscillation by Rauri is a modern take on the concept. It shows a digital version of a curtain made from hundreds of particles that move in unison.
The movement reminds of a wave, so it seems like this dot-based veil is flying in the wind. You can apply the same trick to solid images, thereby giving them an intriguing and visually-appealing look.
Other Ways to Benefit from the Curtain Effect
The Curtain effect is pretty versatile and universal. It can be applied to different elements of the interface, not just the transition between the sections.
Both projects are built around buttons. Each one uses the curtain-like behavior to its advantage, transforming a regular hover effect into a small action.
Thus, CTA by Tristan Wilson has a sliding background that appears on the hover. Its movement direction reminds of a zigzag trajectory. It starts in the top left corner and ends in the bottom center.
Buttons by Mos has a split background, whose behavior is reminiscent of a camera shutter. The parts of the canvas move in a diagonal direction, establishing a focal point on the elements.
Note, both examples do not do anything unusual. However, they quickly get the readers’ attention without sacrifices, and that is exactly what you need for your call to action.
Another area where the curtain effect is widely exploited is in sliding-out sidebars. It is here where it perfectly blends in. Pen by Kyle Shanks is a point-in-case.
Kyle uses the effect, not just for accompanying the appearance of the sidebar, but also for buttons. Note, even though it is a standard slide-out menu, thanks to the curtain-like behavior, it looks inspiring.
Unveil Your Content in Style
The curtain effect is not a tool that will make your entire design pop or lead online visitors to stare in amazement. It is quite conservative in its way of winning over attention, yet it certainly works, but can engage visitors, smartens the design, and enriches the user experience.
- 8 Snippets That Demonstrate the Repelling Effect in Web Design
- 8 Fantastic Onboarding Carousel HTML & CSS Snippets
- Code as an Ode to Hackers
- Forge Your Own (Animation) Path with These Snippets
- 10 Dramatic Examples of Splash Screens in Web Design
- 8 Fantastic Pure CSS Border Effect Code Snippets
- Using Images to Enhance the CSS Hover Effect