jQuery Sakura

Make it rain - sakura petals or anything else for that matter.

Uses CSS3 animations and requestAnimationFrame to put a plethora of cherry blossom petals that drift and sway in the "wind" on your site.

Installation

Download and add the files to your asset folder(s), be sure to use the right paths when including the files in your site.

Basic Usage

Simply include both the css and js file in your HTML and run the sakura() function added by this plugin on domReady or windowLoad:

<!-- In your HTML head --> <link type="text/css" rel="stylesheet" media="screen" href="/css/jquery-sakura.min.css" />  <!-- End of your HTML body --> <script src="/js/jquery-sakura.min.js"></script> <script>     // domReady     $(function() {         $('body').sakura();     });      // windowLoad     $(window).load(function() {         $('body').sakura();     }); </script>

If you ever want or need to disable the generation of the petals, run the method again, passing the event name 'stop' to the function:

$('#stop_sakura').on('click', function() {     $('body').sakura('stop'); });

Configuration

You're able to change some parameters by passing an option object to the sakura function:

$(window).load(function() {     $('body').sakura('start', {         blowAnimations: [             'blow-soft-left',             ...         ],                   // Horizontal movement animation names         className: 'sakura', // Class name to use         fallSpeed: 1,        // Factor for petal fall speed         maxSize: 14,         // Maximum petal size         minSize: 9,          // Minimum petal size         newOn: 300,          // Interval after which a new petal is added         swayAnimations: [    // Swaying animation names             'sway-0',             ...         ]     }); });

Live Demo

You can view a live preview of the most recent version of the plugin here.

Credits

Originally thought up and commissioned by Naomi Forame.