sakura-js

v1.1.1

Published

3 years ago

Vanilla JS version of jQuery-Sakura: Make it rain sakura petals.

Downloads

2,240

0High
0Medium
0Low

hamm

Sakura.js

Sakura.js is an improved vanilla JS version of the jQuery-Sakura plugin. It makes it rain petals on a (section) of your page. Credits to the original creator of the jQuery plugin. I made this plugin because I wanted a tweaked vanilla JS version with NPM support.

Sakura.js (like its original jQuery plugin) uses CSS3 animations and requestAnimationFrame to add elements which look like blossom petals to the DOM. You can add it on any element like the body, a div etc. They will animate on your page influenced by wind and gravity. Of course this doesn't have to be limited to blossom petals. It can be regular leafs as well or something completely different.

Demo

You can check a demo here: jhammann.github.io/sakura/

Install

You can install Sakura.js with NPM:

$ npm install sakura-js

Or with Yarn if you prefer:

$ yarn add sakura-js

Setup

Include the Sakura.js files inside your page and initialize it within your javascript. Below code shows the petals in your body (see the demo for the results).

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/sakura.min.css">
</head>
<body>
    ...
    <script src="path/to/sakura.min.js"></script>
    <script>
      var sakura = new Sakura('body');
    </script>
</body>
</html>

Options

| Name | Description | Type | Default | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------- | | className | Classname of the petals. This corresponds with the Sakura CSS. | String | 'sakura' | | fallSpeed | Speed factor in which the petal falls (the higher the number the slower it falls). | Integer | 1 | | maxSize | The maximum size of the petals. | Integer | 14 | | minSize | The minimum size of the petals. | Integer | 10 | | delay | The delay between petals (in ms). If you increase it, it will take longer for a new petal to drop and vice versa. | Integer | 300 | | colors.gradientColorStart | The petals are made with a linear-gradient. This is the start color (in rgba). | String | 'rgba(255, 183, 197, 0.9)' | | colors.gradientColorEnd | The linear-gradient end color (in rgba). | String | 'rgba(255, 197, 208, 0.9)' | | colors.gradientColorDegree | The degree in which the linear-gradient tilts. | Integer | 120 |

Adding multiple colors

You can add multiple colors like the example below. Colors are randomly picked.

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,
        },
    ],
});

Methods

After you initialize Sakura you have its initialized instance in a variable (like the sakura variable in the example above) with helpful methods.

| Name | Description | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | sakura.stop(graceful); | Stops the petals from dropping and removes them from the DOM. Set graceful (boolean) to true to let the petals finish their animation instead of removing them from the DOM abruptly. | | sakura.start(); | Start Sakura after stopping it. |

Development

Sakura.js uses gulp to build development and production versions (both located in /dist/). The plugin is originally made in ES6 Javascript and SCSS. With gulp we use babel to create browser compatible versions.

First you need to install gulp-cli globally.

Then you have to install the project's dependencies. In the root of the repo do:

$ npm install

or if you use Yarn:

$ yarn install

Tasks

You can run the watch task if you're actively developing. This watches for file changes and builds the correct files. This command also runs eslint.

$ gulp watch

If you want to run eslint individually. You can run the lint task:

$ gulp lint

Finally to build the project without watching or linting run the default gulp task:

$ gulp

Compatibility

I tested this with the latest versions of Chrome, Firefox, Safari and IE11 on desktop and with Chrome for Android, Samsung Internet and iOS Safari.

If you see compatibliy issues (or any issue for that matter) please add them in this repo's issue tracker.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme