https://github.com/lemehovskiy/parallax-content
Vanilla JS parallax content plugin based on GSAP
https://github.com/lemehovskiy/parallax-content
greensock gsap parallax parallax-plugin parallax-scrolling typescript
Last synced: about 1 month ago
JSON representation
Vanilla JS parallax content plugin based on GSAP
- Host: GitHub
- URL: https://github.com/lemehovskiy/parallax-content
- Owner: lemehovskiy
- License: mit
- Created: 2017-04-20T12:13:11.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-21T13:31:59.000Z (over 1 year ago)
- Last Synced: 2025-04-13T06:02:26.389Z (about 1 month ago)
- Topics: greensock, gsap, parallax, parallax-plugin, parallax-scrolling, typescript
- Language: TypeScript
- Homepage:
- Size: 2.01 MB
- Stars: 18
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## parallax-content
Create captivating parallax contents effortlessly with the ParallaxContent plugin. This lightweight Vanilla JavaScript plugin, powered by GSAP animation, supports Scroll and Gyroscope events.
Features:
* Vanilla JavaScript and GSAP powered
* Scroll, Gyroscope events
* Customizable shift and animation duration
### Demo
[Basic demo](https://codesandbox.io/p/devbox/parallax-content-basic-demo-pk4crm)
### Package Managers
```sh
# NPM
npm install parallax_content
```
### Installation
#### Include js
```html
```
#### Set HTML
```html
Parallax title
```
#### Call the plugin
```html
//Initialize with Vanilla JavaScript
new ParallaxContent(document.querySelector('.parallax-title'));
//Initialize with jQuery
$(document).ready(function () {
$('.parallax-title').parallaxContent();
});
```
#### In result
```html
My website
Parallax title
//optional for jQuery initialize
$(document).ready(function () {
$('.parallax-title').parallaxContent();
});
//Initialize with Vanilla JavaScript
new ParallaxContent(document.querySelector('.parallax-title'));
//Initialize with jQuery
$(document).ready(function () {
$('.parallax-title').parallaxContent();
});
```
### Data Attribute Settings
In parallaxContent you can add settings using the data-parallax-content attribute. You still need to call
new ParallaxContent(selector)
to initialize parallaxContent on the element.
Example:
```html
```
### Settings
| Option | Type | Default |
| --------------- | ----- | ------------------ |
| events | [SCROLL, GYRO] | [SCROLL] |
| shift | int | 10 |
| duration | int | 1.5 |
| gyroSensitivity | int | 30 |
### 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-content is released under the MIT License. See the [LICENSE](LICENSE) file for comprehensive details regarding the terms and conditions of use.