Bouncy Content Filter for big Website

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.

<nav>
    <ul>
        <li class="placeholder"> 
            <a href="#0">Option 1</a> <!-- default option on mobile -->
        </li> 
 
        <li>
            <a href="#0">Option 1</a>
        </li>
 
        <li>
            <a href="#0">Option 2</a>
        </li>
 
        <li>
            <a href="#0">Option 3</a>
        </li>
    </ul>
</nav>

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.

<ul>
    <li>
        <ul> <!-- this is the element that will rotate -->
            <li>
                <img src="img/thumb-1.jpg" alt="thumbnail">
            </li>
 
            <li>
                <img src="img/thumb-2.jpg" alt="thumbnail">
            </li>
 
            <li>
                <img src="img/thumb-3.jpg" alt="thumbnail">
            </li>
        </ul>
    </li>
 
    <li>
        <ul> <!-- this is the element that will rotate -->
            <li>
                <img src="img/thumb-1.jpg" alt="thumbnail">
            </li>
 
            <li>
                <img src="img/thumb-2.jpg" alt="thumbnail">
            </li>
 
            <li>
                <img src="img/thumb-3.jpg" alt="thumbnail">
            </li>
        </ul>
    </li>
 
    <!-- ... -->
</ul>

Adding style

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

li.is-visible { /* the front item, visible by default */
 position: relative;
 z-index: 5;
}

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!

li.is-hidden { /* the hidden items, right behind the front one */
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 z-index: 1;
 transform: rotateY(180deg); 
}
 
li.is-selected { /* the next item that will be visible */
  z-index: 3 !important;
}

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:

ul.is-switched li.is-visible {
  transform: rotateY(180deg);
  animation: cd-rotate 0.5s;
}
 
ul.is-switched li.is-hidden {
  transform: rotateY(0);
  animation: cd-rotate-inverse 0.5s;
  opacity: 0;
}
 
ul.is-switched li.is-selected {
  opacity: 1;
}

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

@keyframes cd-rotate {
  0% {
    transform: perspective(800px) rotateY(0);
  }
 
  70% { /* this creates the bounce effect */
    transform: perspective(800px) rotateY(200deg);
  }
 
  100% {
    transform: perspective(800px) rotateY(180deg);
  }
}
 
@keyframes cd-rotate-inverse {
  0% {
    transform: perspective(800px) rotateY(-180deg);
  }
 
  70% {
    transform: perspective(800px) rotateY(20deg);
  }
 
  100% {
    transform: perspective(800px) rotateY(0);
  }
}

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
-Fixed a bug on IOS8: elements disappear during rotation
-jQuery updated to be used with more than one filter in the same page