jQuery Plugin For Sakura Petals Falling Animation - Sakura
| File Size: | 8.33 KB |
|---|---|
| Views Total: | 32981 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A fancy & romantic jQuery plugin that makes use of CSS3 @keyframes rules to create sakura petals falling animation on your web page.
The Vanilla JavaScript Version is now available.
Your might also like:
- Realistic Raindrops Effect with Canvas and Rainyday.js
- Creating Snow Falling Effect with jQuery snowfall Plugin
- Creating 3D Leaves Falling Effect with jQuery and CSS3
- Yet Another Falling Snow Animation with jQuery and Canvas - GlauserChristmas
How to use it:
1. Include jQuery javascript library and jQuery Sakura's script at the end of your page.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery-sakura.min.js"></script>
2. Include jQuery Sakura's stylesheet file in the head section of your page.
<link href="jquery-sakura.css" rel="stylesheet">
3. Call the function on the <body> tag.
$(function(){
$('body').sakura();
});
4. Possible options to customize the animation.
$(function(){
$('body').sakura({
blowAnimations: ['blow-soft-left', 'blow-medium-left', 'blow-soft-right', 'blow-medium-right'],
className: 'sakura',
fallSpeed: 1, // higher is slower
maxSize: 14,
minSize: 10,
newOn: 300, // Interval
swayAnimations: ['sway-0', 'sway-1', 'sway-2', 'sway-3', 'sway-4', 'sway-5', 'sway-6', 'sway-7', 'sway-8']
});
});
This awesome jQuery plugin is developed by timoschaefer. For more Advanced Usages, please check the demo page or visit the official website.
