Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lemehovskiy/parallax-background
Vanilla JS parallax background plugin based on GSAP
https://github.com/lemehovskiy/parallax-background
animation greensock gsap parallax typescript vanilla-js
Last synced: 2 months ago
JSON representation
Vanilla JS parallax background plugin based on GSAP
- Host: GitHub
- URL: https://github.com/lemehovskiy/parallax-background
- Owner: lemehovskiy
- License: mit
- Created: 2017-03-28T08:50:45.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-18T12:23:11.000Z (about 1 year ago)
- Last Synced: 2024-09-16T15:19:20.605Z (4 months ago)
- Topics: animation, greensock, gsap, parallax, typescript, vanilla-js
- Language: TypeScript
- Homepage:
- Size: 2.45 MB
- Stars: 29
- Watchers: 5
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
parallax-background
-------
Create captivating parallax backgrounds effortlessly with the ParallaxBackground plugin. This lightweight Vanilla JavaScript plugin, powered by GSAP animation, supports Scroll, Mouse Move, and Gyroscope events. Choose from Rotate or Shifting animations, and easily configure zoom and animation duration for a personalized touch.
Features:
* Vanilla JavaScript and GSAP powered
* Scroll, Mouse Move, Gyroscope events
* Rotate or Shifting animations
* Customizable zoom and animation duration
### Demo
[Basic demo](https://codesandbox.io/p/devbox/parallax-background-basic-demo-r3qmzy)
[Events types and animation types demo](https://codesandbox.io/p/devbox/parallax-background-demo-events-animation-types-48fk64)
### Package Managers
```sh
# NPM
npm install parallax_background
```
### Installation
#### Include js
```html
```
#### Set HTML
```html
```
#### Call the plugin
```html
//Initialize with Vanilla JavaScript
new ParallaxBackground(document.querySelector(".parallax-background"));
//Initialize with jQuery
$(document).ready(function() {
$('.parallax-background').parallaxBackground();
});
```
#### In result
```html
My website
//optional for jQuery initialize
//Initialize with Vanilla JavaScript
new ParallaxBackground(document.querySelector(".parallax-background"));
//Initialize with jQuery
$(document).ready(function() {
$('.parallax-background').parallaxBackground();
});
```
### Data Attribute Settings
In parallax-background you can add settings using the data-parallax-background attribute. You still need to call
new ParallaxBackground(selector)
to initialize parallax-background on the element.
Example:
```html
```
### Settings
Option | Type | Default
--- | --- | ---
events | [SCROLL, MOUSE, GYRO] | [SCROLL]
animationType | SHIFT \| ROTATE | SHIFT
zoom | int | 20
rotatePerspective | int | 1400
animateDuration | int | 1
### Browser support
* Chrome
* Firefox
### Dependencies
* GSAP animation library (Version 3.10.4)
## Contributing
If you'd like to get involved, please consider opening an issue or submitting a pull request. Your input is highly valued, and I'm enthusiastic about collaborating to enhance this tool.
## License
parallax-background is released under the MIT License. See the [LICENSE](LICENSE) file for comprehensive details regarding the terms and conditions of use.