bouncy content filter preview
May 26, 2014 | 23 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.

  • Jovie Brett Bardoles

    This is so cool! Thanks for the much effort Cody team!

    • Sebastiano Guerriero

      Glad you appreciate this Jovie ;)

      • Jovie Brett Bardoles

        Looking forward for more projects! Thanks again for giving this as free ^_^

  • SlashBrady

    Nice work!

    • http://codyhouse.co/ Sebastiano Guerriero

      Thanks!

    • Sebastiano Guerriero

      Thanks!

  • engagendy

    Thanks, this is really great effort.

  • Gia Thinh

    keep going :)

  • http://www.zviera.com/ Lubo Jurik

    Amazing, thanks Sebastiano!

    Is it possible to have 2 or more of these content filters on a single page?

    Thank you.

    • Claudia Romano

      You can have more filters but you need to tweak the js file a little ( to redefine the selectors according to your html structure). We’ll update the resource so that it can be easily used in case of more filters! Hopefully it will be ready within next week. You’ll find the update in the changelog. Stay tuned! :)

      • http://www.zviera.com/ Lubo Jurik

        Oh, that would be awesome Claudia! Thanks ;)

  • http://www.zviera.com/ Lubo Jurik

    Thank you guys for the update, it works like a charm!

    I changed $this.children(‘.cd-filter’) to $this.find(‘.cd-filter’), so the .cd-filter element didn’t have to be a direct child element of the parent element.

    You can check the end result in a demo here: http://sass.zdravedeti.sk/html/

    • Sebastiano Guerriero

      Great job Lubo! Looks like the images load only at the end of the animation though.

      • http://www.zviera.com/ Lubo Jurik

        Really? On my Firefox, the animation is smooth. I haven’t tested it in other browsers yet. Thanks for the feedback Sebastiano, and for this great plugin ;)

        • Sebastiano Guerriero

          No prob ;) (I was testing on Chrome)

  • http://www.zviera.com/ Lubo Jurik

    I’m using the filter to switch between tabs where the heights of those tabs is random and not the same. Can you guys think of a way how to animate the height of the parent element?

    You can see it here http://beta.zdravedeti.sk/produkt/5/babystyle-ts2-domino-black-travel-system-pushchair when you click on the tabs right bellow the main product image.

    Thanks a lot for any input. And as I said before, you guys rock! ;)

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Lubo, I just looked at your implementation. About the height, you should use js to calculate and assign the height to your tab, then add a CSS transition to the height value. Besides, I’d suggest to consider a simpler approach for your tab, this rotation seems to work better on smaller elements ;)

  • Pingback: Bouncy Content Filter using jQuery & CSS3()

  • http://go.taymiya.com Xamse Maxamuud

    i’am using most your script it usefull design thankz

  • Pingback: Bouncy content filter using CSS and HTML | I Am Programmer()

  • KrvnoZrnce

    First, I love what you do, this is great site, and this script great, works like charm. Now I need help with bit tweaking, I have added script to http://eramond.com/galerija/ , works great, and I’m not using it how its intended most likely. When i change categories I have blank space left when some of them are hidden, is there way to bypass this? Once again thanks :)

  • Alexander

    Hello, love this scripts and trying to make it use on my site.

    I’ve encounter a problem:

    My first category has 2 items, and my second category has 10 items. When i switching from first category to second category. It only show the first row with the rotation and after the animation the items at second+ row will only appear.

    Anyone can help or having the same issue?

  • http://rockacystudios.allyou.net/ Jason Rockacy

    I am really enjoying your scripts. I have a bit of an issue. I would like to combine this filter (with the three option switcher), and combine that with the pricing tables you created on another page. My experience with coding is limited, so I hope I can follow your instructions. Is this filter compatible with the pricing tables? If I am using the pricing table for the graphic content and use the filter for the switching capability, what changes do I have to make to incorporate the filter into the pricing tables?