Filters

December 23, 2011 by Marcin Dziewulski

Introduction

Filters is a jQuery plugin that allows to filter items using custom animation. You can use CSS3 transitions or just fadeIn/Out effect. Go to the demos and see how simple is that.

Demo Download Buy commercial license for $24 Read more about licensing

JavaScript

$('.filters').filters({
	filter: {
		name: 'filter', // (string) class name for links container
		element: 'a', // (string) HTML selector
		active: 'active' // (string) class name for active element
	},
	container: {
		name: 'container', // (string) class name for items container
		element: 'li' // (string) HTML selector
	},
	css3: {
		init: true, // (bool) use CSS3 transitions
		children: 'a', // (string) HTML selector (children of filter.element)
		property: 'all 1s ease', // (string) CSS3 property for transitions
		transform: { // (object) CSS3 transform properties, please use: scale, rotate, skew
			scale: '0' 
		}
	},
	move: {
		init: true, // (bool) set the true if you want fixed position of elements
		easing: 'linear', // (string) set the easing of the animation, you can also use: jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
		duration: 500 // (int) set the speed of the easing animation in milliseconds
	},
	fade: {
		duration: [500, 500], // (array) set the speed of the fading animation in milliseconds - [fadeOut, fadeIn]
		opacity: [0, 1] // (array) set the opacity of elements
	},
	fixed: false, // (bool) setthe  true if you want adjust height of the container
	onclick: function(filter, element){}

});

HTML

<div class="filters">
	<div class="filter">
		<a href="#" rel="collection_name_1">Collection #1</a>
		<a href="#" rel="collection_name_2">Collection #2</a>
		<a href="#" rel="all">All</a>
	</div>
	<div class="container">
		<ul>
			<li class="collection_name_1"> .. </li>
			<li class="collection_name_2"> .. </li>
			<li class="collection_name_1"> .. </li>
			<!-- etc. -->
		</ul>
	</div>
</div>

Author

Marcin Dziewulski

Experienced and creative web developer from Poland, addicted to jQuery and CSS. Follow him on Twitter: @marcinmobily

Comments (2)

Georgia Gibbs

December 24, 2011 - 01:05

can i ask what browsers this has been tested in and if it degrades to a still functioning state in browsers that do not support it? Thank you. It is a great effect.

Jorge Martinez

January 06, 2012 - 08:02

very nice work!!!

a question to put an opacity in the animation easy as you might do?