jQuery Plugin For Sakura Petals Falling Animation - Sakura

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

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.