This time I will share jQuery Plugin and tutorial about Smooth Data Filter Animation In jQuery – filterData.js, hope it will help you in programming stack.
| File Size: | 341 KB |
|---|---|
| Views Total: | 8606 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Just another in-page data filtering plugin for jQuery that uses CSS classes and HTML5 data attributes to filter a group of web contents on the page, with a smooth shuffle effect based on jQuery animate() method. This plugin is designed for your portfolio which contains a large number of images.
How to use it:
1. Create a group of elements and categorize them using CSS classes as these:
01 |
<div class="portfolios"> |
02 |
<div class="web-design"> |
03 |
Web Design Element |
04 |
</div> |
05 |
<div class="web-design web-development"> |
06 |
Web Development & Web Design Element |
07 |
</div> |
08 |
<div class="web-design"> |
09 |
Web Design Element |
10 |
</div> |
11 |
<div class="web-design"> |
12 |
Web Design Element |
13 |
</div> |
14 |
<div class="web-development"> |
15 |
Web Development Element |
16 |
</div> |
17 |
... |
18 |
</div> |
2. Create the filter buttons on the webpage.
1 |
<button type="button" class="filter-btn" data-filter="all">All</button> |
2 |
<button type="button" class="filter-btn" data-filter=".web-design">Web Design</button> |
3 |
<button type="button" class="filter-btn" data-filter=".web-development">Web Development</button> |
3. Initialize the plugin with some options.
1 |
$('.portfolios').filterData({ |
2 |
aspectRatio: '8:5', |
3 |
nOfRow : 3, // the number of rows |
4 |
itemDistance : 0 |
5 |
}); |
4. More configuration options with default values.
01 |
$('.portfolios').filterData({ |
02 |
containerWidth : 0, |
03 |
containerHeight : 0, |
04 |
nOfRow : 0, |
05 |
nOfColumn : 0, |
06 |
aspectRatio : '1:1', |
07 |
containerMargin : '0px auto', |
08 |
itemWidth : 0, |
09 |
itemHeight : 0, |
10 |
itemDistance : 20, |
11 |
animationSpeed : 300, |
12 |
container<a href="https://www.jqueryscript.net/animation/">Animation</a>Delay : 500, |
13 |
allContainerAnimationSpeed : 500, |
14 |
easing : 'swing', |
15 |
margin : 0, |
16 |
filterController : '.filter-btn', |
17 |
responsive : [ |
18 |
{ |
19 |
breakpoint : 1200, |
20 |
containerWidth : 1170, |
21 |
settings : { |
22 |
nOfRow : 3, |
23 |
nOfColumn : 3 |
24 |
} |
25 |
}, |
26 |
{ |
27 |
breakpoint : 992, |
28 |
containerWidth : 970, |
29 |
settings : { |
30 |
nOfRow : 3, |
31 |
nOfColumn : 3 |
32 |
} |
33 |
}, |
34 |
{ |
35 |
breakpoint : 768, |
36 |
containerWidth : 750, |
37 |
settings : { |
38 |
nOfRow : 2, |
39 |
nOfColumn : 2 |
40 |
} |
41 |
} |
42 |
] |
43 |
}); |
This awesome jQuery plugin is developed by maab16. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
