An open API service indexing awesome lists of open source software.

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

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.