ดาวน์โหลดฟรี

ดาวน์โหลด Cool jQuery images Filters effect
เข้าชมทั้งหมด : 673 ครั้ง | ดาวน์โหลด : 193 ครั้ง | หมวด : Image Effects


Cool jQuery images Filters effect

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.

JavaScript

01 $('.filters').filters({
02 filter: {
03 name: 'filter', // (string) class name for links container
04 element: 'a', // (string) HTML selector
05 active: 'active' // (string) class name for active element
06 },
07 container: {
08 name: 'container', // (string) class name for items container
09 element: 'li' // (string) HTML selector
10 },
11 css3: {
12 init: true, // (bool) use CSS3 transitions
13 children: 'a', // (string) HTML selector (children of filter.element)
14 property: 'all 1s ease', // (string) CSS3 property for transitions
15 transform: { // (object) CSS3 transform properties, please use: scale, rotate, skew
16 scale: '0'
17 }
18 },
19 move: {
20 init: true, // (bool) set the true if you want fixed position of elements
21 easing: 'linear', // (string) set the easing of the animation, you can also use: jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
22 duration: 500 // (int) set the speed of the easing animation in milliseconds
23 },
24 fade: {
25 duration: [500, 500], // (array) set the speed of the fading animation in milliseconds - [fadeOut, fadeIn]
26 opacity: [0, 1] // (array) set the opacity of elements
27 },
28 fixed: false, // (bool) setthe true if you want adjust height of the container
29 onclick: function(filter, element){}
30   
31 });

HTML

01 <div class="filters">
02 <div class="filter">
03 <a href="#" rel="collection_name_1">Collection #1</a>
04 <a href="#" rel="collection_name_2">Collection #2</a>
05 <a href="#" rel="all">All</a>
06 </div>
07 <div class="container">
08 <ul>
09 <li class="collection_name_1"> .. </li>
10 <li class="collection_name_2"> .. </li>
11 <li class="collection_name_1"> .. </li>
12 <!-- etc. -->
13 </ul>
14 </div>
15 </div>   

ข้อมูลการดาวน์โหลด Cool jQuery images Filters effect

เข้าชมทั้งหมด

: 673 ครั้ง


ตัวอย่างการทำงาน

ดาวน์โหลดไปแล้ว

: 193 ครั้ง

ประเภท

: Freeware

ขนาดไฟล์

: 243.7 kb

หมวดหมู่

: Image Effects

แนะนำโปรแกรมที่เกี่ยวข้อง


Responsive Image Sizes At Different Resolutions


An Experiment with Mobile-First Images that Scale Responsively & Responsibly What is this? The goal of this technique is to deliver optimized, contextual image sizes in responsive layouts that utilize…
เข้าชมทั้งหมด : 769 ครั้ง | ดาวน์โหลด : 154 ครั้ง | หมวด : Image Effects