In this tutorial, I will show you how to create revealing content overlays with CSS3 transitions, allowing you to minimise content clutter and provide a neat user experience.
Download Source FilesView the Demo
Introduction
I’ll introduce this tutorial by presenting a very suitable use case. Imagine your company offered a bunch of different services, and on your website’s services section, they were listed. Each service had its own description, but you didn’t want to occupy a whole lot of page real estate. You present a bunch of attractive links or buttons instead, prompting and allowing users to click on the links to view more. Each service might not warrant a whole new page, so instead, you reveal content overlays with CSS3 transitions.
They animate into view above the page, and can be closed off easily without ever having to traverse different pages. Pretty neat, huh? Let’s dig in a little!
The Markup
The markup is fairly standard. We have a navigation, and a bunch of corresponding content-containing sections. Each navigation item is referenced to a particular section via matching href‘s and id‘s. Here’s the markup:
Digging Into The CSS
First things first – I’m using box-sizing: border-box across my entire document, and the CSS below is not prefixed. Make sure you prefix yours where necessary (i.e. the transitions/transforms). We’ll tackle the CSS in two parts -
The navigation items, which we’ll make responsive
The sections, which are initially hidden off screen and transition into view when a navigation item is clicked
The aesthetic of the navigation is trivial to this system being functional. for simplicity’s sake, I just styled them as good ol’ block elements that shifted to two per row at a breakpoint. Here’s the CSS:
The CSS for the content sections requires a bit more thought processing. Initially, all sections are hidden and out of sight. When a navigation item is clicked, the corresponding section comes into view. A semi-transparent black overlay fades in above everything, then a white square with content slides in from the left. These transitions will take place when an .active class is added to a section. There will also be a “close” button to close off the overlay, which was denoted in the HTMl above.
So to recap quickly -
A user presses a navigation button, and the corresponding section transitions into view
A black overlay (mask) fades in for 0.2 seconds
After that transition is complete, a white box containing all the content slides in from the left
A user can close the current section by either clicking a close button, or the mask
Here’s the CSS:
Making It Work With JavaScript
This is all useless if JavaScript doesn’t handle the situation accordingly. We need to listen for clicks on our navigation items, and show the correct section by adding the .active class. We also need to listen for clicks on the close button and mask which will hide the currently active section by removing the .active class. I’m using classie.js for class addition/removal/checking helper functions, and all JS is run in a self-executing function right before the closing boy tag. Here’s the JavaScript:
Wrap Up
And that’s a wrap! We’ve tackled a really nice solution to a common situation. We’ve prevented an overload of information all at once, and given users an option to click on some attractive links to gather more information. Revealing content overlays are a great way to include a lot of information on one page without too much clutter. Some awesome CSS3 transitions give users a smooth and modern experience too. Feel free to try different combinations of transitions too!
Thanks for reading, and I hope you enjoyed this tutorial. Feel free to leave any comments, feedback, or questions below, and don’t forget you can download the source and view the demo by clicking the links below.
Download Source FilesView the Demo
The post Create Revealing Content Overlays With CSS3 Transitions appeared first on Speckyboy Design Magazine.
Related posts:
40 High Quality CSS and XHTML Web Layout Templates
What else does HTML5 need to defeat flash? (Part 1)
Good Old Static HTML Sites Aren’t Dead Yet. Should They Be?
Speckyboy Design Magazine