Bouncy content filter using CSS and HTML

This space-saving content filter allows the users to switch from one category to the other in a fancy way! Each click fires the rotation of the gallery images, revealing the items belonging to the selected category.

Content filters are particularly useful for big websites, where each pixel counts. Lets say you are showing the “last products” of your e-commerce. How about giving the users the option to switch to the “most popular” products without a page refresh? A good solution could be to hide the “most popular” items right behind the “last products”, then use the power of CSS3 3D Transforms to rotate the items when the user switches from one option to the other. The bounce effect is optional, but you get the idea! The rotation won’t work on older browsers like IE9, but the experience won’t be broken – just a display on/off with no transitions. Lets dive into the code!

Creating the structure

We wrapped the filter into a <nav> element. The filter structure is just an unordered list. We have 3 options, but 4 list items: the first one is a placeholder we’ll use on mobile to show the selected option (using jQuery). The placeholder will be removed (display:none) on larger screens by using media queries. Remember that we create our resources starting from mobile, so we need to think about small screens first.

CREATING AN ORGANIZED DATE AREA ON YOUR WEBSITE TUTORIAL

For the gallery, we created an unordered list nested into another unordered list. The second <ul> element is the one that will rotate, and the 3 images inside will rotate with it.

Adding style

The first list item, therefore the image it contains, is the one visible. We give it a class .is-visible:

The get direction form from google map

Take in mind that the other list items – of the same unordered list – will have an absolute position: that means that the height of the unordered list will depend upon this first list item. Besides by giving it a higher z-index we make sure it sits on top.

The other 2 classes we need are .is-hidden and .is-selected – that we give to the other list items. The .is-hidden class is applied to all hidden list items, while .is-selected is applied only to the item whose category has been selected (we do this in jQuery). Note that by applying a CSS3 transformation (180deg rotation) we make sure that once the <ul> element rotates by 180deg, we see the front of the list item that was hidden instead of its back.

Oh and don’t forget to add backface-visibility: hidden; to all list items!

Events handling

Now here is the idea: when the user clicks to change option, we use jQuery to add a .is-switched class to the <ul> element that rotates. The purpose of this class is to allow us to change simultaneously the properties of our 3 classes:

Where to put your CSS in the HTML

We used CSS3 Animations to achieve the bounce effect, but CSS3 transitions would work just fine:

Now some of you may be wondering: why didn’t he apply the rotation directly to the <ul> element? Because that would have made necessary to apply transform-style: preserve-3d; to the <ul>element (to allow nesting 3D transformations, because list items rotate too) . Things would have been much easier, but unfortunately preserve-3d isn’t supported by IE (up to 11).  That’s why I applied the transformations to each list item instead.

Hope you enjoyed this, now go out and change the world!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s