bouncy content filter preview
May 26, 2014 | 51 Feedbacks

Bouncy content filter

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.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

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.

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:

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:

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!

Changelog

Nov 22, 2014
  • Fixed a bug on IOS8: elements disappear during rotation - by CodyHouse
June 4, 2014
  • jQuery updated to be used with more than one filter in the same page- by CodyHouse
May 26, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.