https://github.com/jersyfi/element-animation
Prop actions for example falling snow or leaves or just moving props or elements with mousemove in pure javascript.
https://github.com/jersyfi/element-animation
animation element falling-leaves falling-snow javascript js mousemove moving-particles prop props rain
Last synced: 3 months ago
JSON representation
Prop actions for example falling snow or leaves or just moving props or elements with mousemove in pure javascript.
- Host: GitHub
- URL: https://github.com/jersyfi/element-animation
- Owner: Jersyfi
- License: mit
- Created: 2021-06-25T08:19:22.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-11-04T14:12:12.000Z (over 4 years ago)
- Last Synced: 2024-10-07T12:10:05.724Z (over 1 year ago)
- Topics: animation, element, falling-leaves, falling-snow, javascript, js, mousemove, moving-particles, prop, props, rain
- Language: JavaScript
- Homepage:
- Size: 277 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# element-animation
## What is this project for?
You 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.
Start 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.
### Live preview
View the test file live on GitHub Pages with clicking [here](https://jersyfi.github.io/element-animation/test/bootstrap.html).
## Documentation
### Get started
To start with the project element-animation you need to install via NPM and then import it.
```bash
npm i element-animation
```
```javascript
import elementAnimation from element-animation
var elemAnim = new elementAnimation(
container,
props,
options
)
```
container -> DOMElement (default: null) \
props -> Array (default: []) \
options -> Object (default: {})
Before 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()`.
First we start with the container. Here you need to give a DOMElement for example a simple `
` container.
```html
```
```javascript
const container = document.getElementById('element-animation')
```
Then you need to define props. There you give an array with the sources to the images like .jpg or .svg.
```javascript
props = [
'src_to_img',
'src_to_img_1'
]
```
For 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.
```javascript
options = {
interval: 550, // rain
rotate: [-40, 40],
size: [10, 15],
duration: [5, 13], // rain
amount: [30, 40] // mousemove
}
```
Now 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()`.
### Functions
All functions except `mousemoveElements()` need a container for the generated elements.
#### rain()
```javascript
new elementAnimation(container, props, options).rain()
```
#### mousemove()
```javascript
new elementAnimation(container, props, options).mousemove()
```
#### rainWithMousemove()
```javascript
new elementAnimation(container, props, options).rainWithMousemove()
```
#### mousemoveElements()
data-p-element -> Defines that it is a element for movement
data-p-move -> Factor from 0 to unlimited (float with dots allowed)
```html
Example text or element here.
Secound example text or element here.
```
```javascript
new elementAnimation(container, props, options).mousemoveElements()
```
### Helpers
#### reset()
Can be used to reset all prop actions.
After a reset you can call another functions
```javascript
const elemAnim = new elementAnimation(container, props, options).rain()
elemAnim.reset()
elemAnim.mousemove()
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Credits
- [Jérôme Bastian Winkel](https://github.com/jersyfi)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE) for more information.