This time I will share jQuery Plugin and tutorial about Create Attractive Animations Using Canvas And CSS3 – jQuery Twinkle, hope it will help you in programming stack.
| File Size: | 77.2 KB |
|---|---|
| Views Total: | 1021 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
The Twinkle jQuery plugin makes uses of canvas and/or CSS3 to create awesome attractive interactions and animations on the webpage.
Animations included:
- Splash (canvas)
- Drop (canvas)
- Drops (canvas)
- Pulse (canvas)
- Orbit (canvas)
- Splash-css(jQuery+CSS3)
- Drop-css (jQuery+CSS3)
- Drops-css (jQuery+CSS3)
How to use it:
1. Load the Twinkle plugin’s script jquery.twinkle.min.js after jQuery library and we’re ready to go.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery.twinkle.min.js"></script> |
2. Attach the plugin to the target element and specify the animation type:
1 |
$(selector).twinkle({ |
2 |
'effect': 'drop' |
3 |
}); |
3. Customize the position of the animation.
1 |
$(selector).twinkle({ |
2 |
widthRatio: 0.5 |
3 |
heightRatio: 0.5 |
4 |
}); |
4. Trigger a function after the animation is completely finished.
1 |
$(selector).twinkle({ |
2 |
callback: function(){ |
3 |
// do something |
4 |
} |
5 |
}); |
5. Override the default animation settings. All possible settings:
01 |
// splash |
02 |
$(selector).twinkle({ |
03 |
effect: 'splash', |
04 |
EffectOptions { |
05 |
color: 'rgba(255,0,0,0.5)', |
06 |
radius: 300, |
07 |
duration: 1000 |
08 |
} |
09 |
}); |
10 |
11 |
// drop |
12 |
$(selector).twinkle({ |
13 |
effect: 'drop', |
14 |
EffectOptions { |
15 |
color: 'rgba(255,0,0,0.5)', |
16 |
radius: 300, |
17 |
duration: 1000, |
18 |
width: 2 |
19 |
} |
20 |
}); |
21 |
22 |
// drops |
23 |
$(selector).twinkle({ |
24 |
effect: 'drops', |
25 |
EffectOptions { |
26 |
color: 'rgba(255,0,0,0.5)', |
27 |
radius: 300, |
28 |
duration: 1000, |
29 |
width: 2, |
30 |
count: 3, |
31 |
delay: 100 |
32 |
} |
33 |
}); |
34 |
35 |
// pulse |
36 |
$(selector).twinkle({ |
37 |
effect: 'pulse', |
38 |
EffectOptions { |
39 |
color: 'rgba(255,0,0,0.5)', |
40 |
radius: 100, |
41 |
duration: 3000 |
42 |
} |
43 |
}); |
44 |
45 |
// orbit |
46 |
$(selector).twinkle({ |
47 |
effect: 'orbit', |
48 |
EffectOptions { |
49 |
color: 'rgba(255,0,0,0.5)', |
50 |
radius: 100, |
51 |
duration: 3000, |
52 |
satellites: 10, |
53 |
satellitesRadius: 10, |
54 |
circulations: 1.5 |
55 |
} |
56 |
}); |
57 |
58 |
// splash-css |
59 |
$(selector).twinkle({ |
60 |
effect: 'splash-css', |
61 |
EffectOptions { |
62 |
color: 'rgba(255,0,0,0.5)', |
63 |
radius: 300, |
64 |
duration: 1000 |
65 |
} |
66 |
}); |
67 |
68 |
// drop-css |
69 |
$(selector).twinkle({ |
70 |
effect: 'drop-css', |
71 |
EffectOptions { |
72 |
color: 'rgba(255,0,0,0.5)', |
73 |
radius: 300, |
74 |
duration: 1000, |
75 |
width: 2 |
76 |
} |
77 |
}); |
78 |
79 |
// drops-css |
80 |
$(selector).twinkle({ |
81 |
effect: 'drops-css', |
82 |
EffectOptions { |
83 |
color: 'rgba(255,0,0,0.5)', |
84 |
radius: 300, |
85 |
duration: 1000, |
86 |
width: 2, |
87 |
count: 3, |
88 |
delay: 300 |
89 |
} |
90 |
}); |
Changelog:
v0.10.0 (2020-07-28)
- JS updated
This awesome jQuery plugin is developed by lrsjng. For more Advanced Usages, please check the demo page or visit the official website.
