{"id":21204585,"url":"https://github.com/jersyfi/element-animation","last_synced_at":"2026-02-24T03:07:35.021Z","repository":{"id":50275422,"uuid":"380171901","full_name":"Jersyfi/element-animation","owner":"Jersyfi","description":"Prop actions for example falling snow or leaves or just moving props or elements with mousemove in pure javascript.","archived":false,"fork":false,"pushed_at":"2021-11-04T14:12:12.000Z","size":284,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-07T12:10:05.724Z","etag":null,"topics":["animation","element","falling-leaves","falling-snow","javascript","js","mousemove","moving-particles","prop","props","rain"],"latest_commit_sha":null,"homepage":"","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/Jersyfi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-06-25T08:19:22.000Z","updated_at":"2024-05-07T20:25:50.000Z","dependencies_parsed_at":"2022-08-25T14:02:08.404Z","dependency_job_id":null,"html_url":"https://github.com/Jersyfi/element-animation","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jersyfi%2Felement-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jersyfi%2Felement-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jersyfi%2Felement-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jersyfi%2Felement-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jersyfi","download_url":"https://codeload.github.com/Jersyfi/element-animation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225628963,"owners_count":17499243,"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":["animation","element","falling-leaves","falling-snow","javascript","js","mousemove","moving-particles","prop","props","rain"],"created_at":"2024-11-20T20:37:12.392Z","updated_at":"2026-02-24T03:07:34.964Z","avatar_url":"https://github.com/Jersyfi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"/img/socialcard.jpg\" alt=\"Social Card of element-animation\"\u003e\u003c/p\u003e\r\n\r\n![NPM Downloads](https://img.shields.io/npm/dt/element-animation)\r\n![NPM](https://img.shields.io/npm/v/element-animation)\r\n![Github Code Size](https://img.shields.io/github/languages/code-size/jersyfi/element-animation)\r\n![GitHub License](https://img.shields.io/github/license/jersyfi/element-animation)\r\n\r\n# element-animation\r\n\r\n## What is this project for?\r\nYou can use this project to create congratulation confetti, snow or leaves falling from top to bottom or moved by mouse. Also elements insider your hole document can be moved by mouse movement. With this project you can create awesome effects on your website.\r\n\r\nStart with a simple test file to see what the project can do without coding yourself. First you need to download the project and then go to the [test](./test/) folder and preview the bootstrap html file.\r\n\r\n### Live preview\r\nView the test file live on GitHub Pages with clicking [here](https://jersyfi.github.io/element-animation/test/bootstrap.html).\r\n\r\n## Documentation\r\n\r\n### Get started\r\n\r\nTo start with the project element-animation you need to install via NPM and then import it.\r\n\r\n```bash\r\nnpm i element-animation\r\n```\r\n\r\n```javascript\r\nimport elementAnimation from element-animation\r\n\r\nvar elemAnim = new elementAnimation(\r\n    container,\r\n    props,\r\n    options\r\n)\r\n```\r\n\r\ncontainer -\u003e DOMElement (default: null) \\\r\nprops -\u003e Array (default: []) \\\r\noptions -\u003e Object (default: {})\r\n\r\nBefore we start to define the variables you need to know that you only need `container` and `props` when using the functions `rain()`, `mousemove()` and `rainWithMousemove()`.\r\nFirst we start with the container. Here you need to give a DOMElement for example a simple `\u003cdiv\u003e\u003c/div\u003e` container.\r\n\r\n```html\r\n\u003cdiv id=\"element-animation\"\u003e\u003c/div\u003e\r\n```\r\n\r\n```javascript\r\nconst container = document.getElementById('element-animation')\r\n```\r\n\r\nThen you need to define props. There you give an array with the sources to the images like .jpg or .svg.\r\n\r\n```javascript\r\nprops = [\r\n    'src_to_img',\r\n    'src_to_img_1'\r\n]\r\n```\r\n\r\nFor the options you have the following possibilities. When a comment is behind a option it means that the option is only for a specific funtion.\r\n\r\n```javascript\r\noptions = {\r\n    interval: 550,          // rain\r\n    rotate: [-40, 40],\r\n    size: [10, 15],\r\n    duration: [5, 13],      // rain\r\n    amount: [30, 40]        // mousemove\r\n}\r\n```\r\n\r\nNow you need to call one of the given functions [described down below](#functions) to visially see the animation. Choose between `rain()`, `mousemove()`, `rainWithMousemove()` and a special function `mousemoveElements()`.\r\n\r\n### Functions\r\n\r\nAll functions except `mousemoveElements()` need a container for the generated elements.\r\n\r\n#### rain()\r\n```javascript\r\nnew elementAnimation(container, props, options).rain()\r\n```\r\n\r\n#### mousemove()\r\n```javascript\r\nnew elementAnimation(container, props, options).mousemove()\r\n```\r\n\r\n#### rainWithMousemove()\r\n```javascript\r\nnew elementAnimation(container, props, options).rainWithMousemove()\r\n```\r\n\r\n#### mousemoveElements()\r\ndata-p-element -\u003e Defines that it is a element for movement\r\n\u003cbr\u003edata-p-move -\u003e Factor from 0 to unlimited (float with dots allowed)\r\n\r\n```html\r\n\u003cdiv data-ea-element data-ea-move=\"0.5\"\u003e\r\n    Example text or element here.\r\n\u003c/div\u003e\r\n\r\n\u003cdiv data-ea-element data-ea-move=\"0.8\"\u003e\r\n    Secound example text or element here.\r\n\u003c/div\u003e\r\n```\r\n\r\n```javascript\r\nnew elementAnimation(container, props, options).mousemoveElements()\r\n```\r\n\r\n### Helpers\r\n\r\n#### reset()\r\nCan be used to reset all prop actions.\r\nAfter a reset you can call another functions\r\n\r\n```javascript\r\nconst elemAnim = new elementAnimation(container, props, options).rain()\r\n\r\nelemAnim.reset()\r\nelemAnim.mousemove()\r\n```\r\n\r\n## Changelog\r\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\r\n\r\n## Credits\r\n- [Jérôme Bastian Winkel](https://github.com/jersyfi)\r\n- [All Contributors](../../contributors)\r\n\r\n## License\r\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjersyfi%2Felement-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjersyfi%2Felement-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjersyfi%2Felement-animation/lists"}