Bringing the Curtain Effect to Your Website with These Snippets
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.
Also, note there is a very helpful JavaScript plugin: Curtain.js. If you need a quick solution and you do not want to mess around with code, you should give it a try.
Basic Curtain Effects
Looking for something simple, yet fun? These examples are a great place to start.
Hover Curtain Effect by Tom Hughes
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.
See the Pen Hover Curtain Effect by Tom Hughes.
Curtain Hero Section by methodoccasion
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.
See the Pen Curtain Hero Section by methodoccasion.
Curtain Scrolling by Julia Mitchelmore
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.
See the Pen Curtain Scrolling by Julia Mitchelmore
Project by Ricardo Soto
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.
See the Pen AuHDk by Ricardo Soto
Radial curtain
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.
See the Pen Radial curtain by Sahil
Curtain animation by Egor
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.
See the Pen Curtain animation (dribbble shot) by Egor
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.
Curtains
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.
See the Pen Curtains by @TimLamber
Curtain Oscillation by Rauri
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.
See the Pen Curtain Oscillation by Rauri
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.
Curtain-Call Button Hover Effect by Tristan Wilson / button with curtains effect by Mos
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.
See the Pen Curtain-Call Button Hover Effect by Tristan Wilson
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.
See the Pen Nice flat button with curtains efffect by Mos
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.
Pen by Kyle Shanks
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.
See the Pen Pay no attention to this pen…. by Kyle Shanks
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.
The post Bringing the Curtain Effect to Your Website with These Snippets appeared first on Speckyboy Design Magazine.