jQuery Plugin For Sakura Petals Falling Animation - Sakura
File Size: | 8.33 KB |
---|---|
Views Total: | 32392 |
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.