Filters è un plugin jQuery che permette di filtrare gli elementi con animazioni personalizzate. È possibile utilizzare transizioni CSS3 o effetti fadeIn / Out. Vai alla demo per vedere questo sorprendente plugin in azione.
Codice Javascript per l’inserimento
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$('.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){} }); |
Codice HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> <ul> <li class="collection_name_1">..</li> <li class="collection_name_2">..</li> <li class="collection_name_1">..</li> </ul> </ul> <!-- etc. --> </div> </div> |
Demo Download Info | Sito Web | Autore
pixolo ads