rahul-pxl / parlx.js

JavaScript & jQuery parallax effect library

parlx.js

JavaScript & jQuery parallax effect plugin

Demo

See plugin in action

Usage

At the beginning connect the library with Your project:

• using script tag in HTML:

<script src="/directory/to/library/folder/parlx.js"></script>

• or via command line and CommonJS/ES6 import:

npm install parlx.js // npm
yarn add parlx.js // yarn

const Parlx = require('parlx.js'); // CommonJS
import Parlx from 'parlx.js'; // ES6

Next use library with:

• Vanilla JavaScript e.g:

const elems = document.querySelectorAll('.parallax');
const parlx = new Parlx(elems, {
  // options...
});

• or jQuery e.g: Connect jQuery in HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

or include via command line and CommonJS

npm install jquery // npm
yarn add jquery // yarn
bower install jquery // bower

const jQuery = require('jquery');

and call plugin on element

$('.parallax').parlx({
  // options...
});

• Plugin supports autoinit To use it, add data-parlx to html element e.g:

<div data-parlx></div>

Options

Name	Type	Default	Description	Available options
direction	string	vertical	parallax element move direction	vertical, horizontal, diagonal
type	string	background	type of parallax	foreground (div move), background (inner image move)
speed	number	0.3	parallax speed	values >= -1 and <= 1
height	string	400px	Height of parallax effect container	e.g: 500px, 70vh, auto
mobile	boolean	true	Enable or disable parallax effect on mobile devices	Enable true, disable false

Event

parlxMove event will output current position of the parallax element

License

This project is licensed under the MIT License