{"id":25839801,"url":"https://github.com/jhammann/sakura","last_synced_at":"2025-04-06T09:07:01.483Z","repository":{"id":33975328,"uuid":"164855280","full_name":"jhammann/sakura","owner":"jhammann","description":"🌸 A javascript plugin to Make it rain sakura petals using CSS animations and requestAnimationFrame (vanilla JS and improved version of jQuery-Sakura).","archived":false,"fork":false,"pushed_at":"2024-06-05T15:25:57.000Z","size":1172,"stargazers_count":142,"open_issues_count":18,"forks_count":21,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T08:09:08.611Z","etag":null,"topics":["css3-animations","es6","javascript","javascript-plugin","npm","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://jhammann.github.io/sakura/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhammann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-09T12:04:08.000Z","updated_at":"2025-03-19T02:32:01.000Z","dependencies_parsed_at":"2023-01-15T03:46:07.179Z","dependency_job_id":null,"html_url":"https://github.com/jhammann/sakura","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhammann%2Fsakura","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhammann%2Fsakura/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhammann%2Fsakura/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhammann%2Fsakura/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhammann","download_url":"https://codeload.github.com/jhammann/sakura/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247457799,"owners_count":20941906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3-animations","es6","javascript","javascript-plugin","npm","vanilla-javascript"],"created_at":"2025-03-01T04:34:32.892Z","updated_at":"2025-04-06T09:07:01.465Z","avatar_url":"https://github.com/jhammann.png","language":"JavaScript","readme":"# Sakura.js\nSakura.js is an improved vanilla JS version of the [jQuery-Sakura](https://github.com/almightynay/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.\n\nSakura.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.\n\n![](https://i.imgur.com/Qvmj4sM.gif)\n\n## Demo\nYou can check a demo here: [jhammann.github.io/sakura/](https://jhammann.github.io/sakura/)\n\n## Install\nYou can install Sakura.js with NPM:\n\n```bash\n$ npm install sakura-js\n```\n\nOr with Yarn if you prefer:\n\n```bash\n$ yarn add sakura-js\n```\n\n## Setup\nInclude the Sakura.js files inside your page and initialize it within your javascript.\nBelow code shows the petals in your body (see the [demo](https://jhammann.github.io/sakura/) for the results).\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    ...\n    \u003clink rel=\"stylesheet\" href=\"path/to/sakura.min.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    ...\n    \u003cscript src=\"path/to/sakura.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      var sakura = new Sakura('body');\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Options\n\n| Name                         | Description                                                                                                                                        | Type    | Default                    |\n| ---------------------------- |----------------------------------------------------------------------------------------------------------------------------------------------------| ------- | -------------------------- |\n| `className`                  | Classname of the petals. This corresponds with the Sakura CSS.                                                                                     | String  | 'sakura'                   |\n| `fallSpeed`                  | Speed factor in which the petal falls (the higher the number the slower it falls).                                                                 | Integer | 1                          |\n| `maxSize`                    | The maximum size of the petals.                                                                                                                    | Integer | 14                         |\n| `minSize`                    | The minimum size of the petals.                                                                                                                    | Integer | 10                         |\n| `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                        |\n| `colors.gradientColorStart`  | The petals are made with a [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient). This is the start color (in rgba). | String  | 'rgba(255, 183, 197, 0.9)' |\n| `colors.gradientColorEnd`    | The linear-gradient end color (in rgba).                                                                                                           | String  | 'rgba(255, 197, 208, 0.9)' |\n| `colors.gradientColorDegree` | The degree in which the linear-gradient tilts.                                                                                                     | Integer | 120                        |\n| `lifeTime`                   | The life time of the petals (0 is infinity).                                                                                                       | Integer | 0                          |\n\n##### Adding multiple colors\nYou can add multiple colors like the example below. Colors are randomly picked.\n\n```js\nvar sakura = new Sakura('body', {\n    colors: [\n        {\n            gradientColorStart: 'rgba(255, 183, 197, 0.9)',\n            gradientColorEnd: 'rgba(255, 197, 208, 0.9)',\n            gradientColorDegree: 120,\n        },\n        {\n            gradientColorStart: 'rgba(255,189,189)',\n            gradientColorEnd: 'rgba(227,170,181)',\n            gradientColorDegree: 120,\n        },\n        {\n            gradientColorStart: 'rgba(212,152,163)',\n            gradientColorEnd: 'rgba(242,185,196)',\n            gradientColorDegree: 120,\n        },\n    ],\n});\n```\n\n\n## Methods\n\nAfter you initialize Sakura you have its initialized instance in a variable (like the `sakura` variable in the example above) with helpful methods.\n\n| Name                     | Description                                                                                                                                                                                 |\n| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `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. |\n| `sakura.start();`        | Start Sakura after stopping it.                                                                                                                                                             |\n\n## Development\n\nSakura.js uses `gulp` to build development and production versions (both located in `/dist/`).\nThe plugin is originally made in ES6 Javascript and SCSS. With gulp we use babel to create browser compatible versions.\n\nFirst you need to install [gulp-cli](https://gulpjs.com/) globally.\n\nThen you have to install the project's dependencies. In the root of the repo do:\n\n```bash\n$ npm install\n```\n\nor if you use Yarn:\n\n```bash\n$ yarn install\n```\n\n##### Tasks\n\nYou 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.\n\n```bash\n$ gulp watch\n```\nIf you want to run eslint individually. You can run the lint task:\n\n```bash\n$ gulp lint\n```\n\nFinally to build the project without watching or linting run the default gulp task:\n\n```bash\n$ gulp\n```\n\n## Compatibility\n\nI tested this with the latest versions of Chrome, Firefox, Safari and IE11 on desktop and with Chrome for Android, Samsung Internet and iOS Safari.\n\nIf you see compatibliy issues (or any issue for that matter) please add them in this repo's issue tracker.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhammann%2Fsakura","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhammann%2Fsakura","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhammann%2Fsakura/lists"}