Sakura Falling Effect In Vanilla JavaScript – sakura.js

Preview:

Description:

This is the vanilla JS version of the jQuery Sakura plugin that applies a fast smooth animated falling sakura petals effect using CSS animations and requestAnimationFrame API.

How to use it:

Import the sakura.css and sakura.js into the HTML page.

<link rel="stylesheet" href="dist/sakura.css" />
<script src="dist/sakura.js"></script>

Apply the falling sakura petals effect to a container element you specify.

var sakura = new Sakura('body', {
    // options here
});

Customize the color of sakura petals.

var sakura = new Sakura('body', {
    colors: [
      {
        gradientColorStart: 'rgba(255, 183, 197, 0.9)',
        gradientColorEnd: 'rgba(255, 197, 208, 0.9)',
        gradientColorDegree: 120,
      },
      {
        gradientColorStart: 'rgba(255,189,189)',
        gradientColorEnd: 'rgba(227,170,181)',
        gradientColorDegree: 120,
      },
      {
        gradientColorStart: 'rgba(212,152,163)',
        gradientColorEnd: 'rgba(242,185,196)',
        gradientColorDegree: 120,
      },
    ]
});

Specify the delay between sakura petals. Default: 300(ms).

var sakura = new Sakura('body', {
    delay: 200
});

Customize the animation speed. Default: 1 (higher is slower).

var sakura = new Sakura('body', {
    fallSpeed: 2
});

Set the min/max size of sakura petals.

var sakura = new Sakura('body', {
    maxSize: 14,
    minSize: 10
});

Start/stop the effect.

// stops the effect
sakura.stop(true);
// stops the effect and removes the petals from the DOM
sakura.stop();
// starts the effect
sakura.start();