Not everything on a website has to be displayed straightforwardly. Sometimes, it’s prudent to hide an element. We can then reveal it automatically or via user interaction.
That’s what makes reveal effects so compelling. They can serve dual purposes. The first is to keep our layouts nice and tidy. The second is to add a bit of flair to the user experience (UX).
And there are many intriguing options for web designers. Using CSS and JavaScript offers a path to creating high-end effects. They not only look great, though. There are ways to build features that are performant and accessible as well.
Want to explore some possibilities? Check out our collection of fantastic reveal effects. They run the gamut in terms of use cases and technology.
Scratch Card CSS Reveal by Nicolas Jesenberger
This reveal effect mimics a real-world experience – using a scratch card. Use your finger or pointing device to “scratch” off the silver foil. You’ll find a little surprise underneath. It’s both clever and well-executed.
See the Pen Scratch Card by Nicolas Jesenberger
Magic Wand Reveal by Kalis Network
Here’s a snippet that takes web magic to the next level. Move the magic wand from left to right to reveal the image gallery underneath. There’s also a subtle effect for nearby images. They’re blurry and displayed with a lower opacity.
See the Pen Magic Reveal by Kalis Network
Circular Reveal Animation by Liza Shermayster
You don’t need to go overboard with reveal effects. This simple presentation reveals more of the image upon hover. And it also adds a classy text animation. It would work well on a portfolio or About Us page.
See the Pen circular reveal animation by Liza Shermayster
Text Reveal Animation by Owlypixel
How about a reveal effect that happens automatically? This animated headline is beautiful and sure to get a user’s attention. It’s also powered by CSS. That means there are no messy scripts to slow down your page load times. The JavaScript used in the snippet refreshes the demo.
See the Pen Text Reveal Animation by Owlypixel
Ink Transition Reveal by Ryan Yu
These scroll-based animations are incredible. The artwork appears to be drawn on your screen as you scroll. The effect creates a mood to enhance the UX. It’s a case of special effects fitting the content to a tee.
See the Pen Ink transition effect with PNG sprite by Ryan Yu (@iamryanyu)
Movie Poster Interaction Reveal by Ethan
Card UIs are a popular design element these days. But there’s only so much content they can hold. This snippet offers a solid workaround. Hover over a card to reveal further content. The layout remains neat while adding a bit of interactivity.
See the Pen Movie Poster Interaction by Ethan
Page Reveal Effect by Kevin Levron
Yes, you can use reveal effects for an entire page! And this tool can help you create the perfect fit for your project. Choose from several animation types and other options to build a beautiful presentation. Plus, it’s just plain fun to experiment with.
See the Pen Page Reveal Effect (CSS/VueJS) by Kevin Levron
Accessible Offcanvas Reveals by Vasileios Mitsaras
Offcanvas elements are a handy place to store extra info. They’re often used to hide mobile navigation so that users can focus on content. This demo uses jQuery to add elements that can be revealed in multiple ways.
See the Pen Accessible Offcanvas by Vasileios Mitsaras
A Revealing Way to Build a UI
Reveal effects can take many forms. They’re suitable for everything from a corporate website to an online game. Their potential is vast and varied.
It’s still important to consider the impact on users, though. The best implementations feel natural and add to the UX. Therefore, it’s best to avoid effects that get in the way of accessing content.
Thankfully, CSS and JavaScript provide plenty of leeway. You can use the combination that works best for your project.
Want to see even more reveal effects? Check out our CodePen collection!
8 CSS & JavaScript Snippets for Awesome Reveal Effects Medianic.
