https://github.com/min30327/luxy.js

Inertia scroll and parallax effect plugin in Vanilla.js
https://github.com/min30327/luxy.js

Last synced: about 2 months ago
JSON representation

Inertia scroll and parallax effect plugin in Vanilla.js

• Host: GitHub
• URL: https://github.com/min30327/luxy.js
• Owner: min30327
• Created: 2018-05-17T05:15:51.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T16:42:42.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T04:22:51.282Z (5 months ago)
• Language: JavaScript
• Size: 6.41 MB
• Stars: 588
• Watchers: 10
• Forks: 89
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# luxy.js

Inertia scroll and parallax effect plugin in Vanilla.js

## Demo

[View the demo](http://min30327.github.io/luxy.js/)

## Installation

You can install it using npm:

```

npm install luxy.js --save

```

Or just include the script in your page:

```html

```

Included luxy.js in your project and initialize:

```html

    luxy.init();

```

## Usage

Wrap the entire content with the element specified in the wrapper option. Please exclude fixed elements.

```html



    ... Entire content



```


Add .luxy-el to the element for which parallax effect is to be specified.

```html



    




```


Specify the speed of the parallax effect with the data-speed-y attribute and offset with the data-offset attribute.

```html



    




```


If you want to move horizontally, specify data-horizontal="1" and specify the speed in the horizontal direction with the data-speed-x attribute.

```html



    




```


## Options

| Name         | default    | description                       |

|--------------|------------|-----------------------------------|

| wrapper      | '#luxy'    | Entire content wrapper element.   |

| targets      | '.luxy-el' | Parallax effect targets elements. |

| wrapperSpeed | 0.08       | Inertia scroll speed.             |