Skip to content

jpolitowski/parlx.js

 
 

Repository files navigation

NPM version NPM downloads

About

Demo

See plugin in action

React plugin

If you use React, install component with the implementation of the parlx.js library! More here

How to Install

First, install the library in your project by npm:

$ npm install parlx.js

Or Yarn:

$ yarn add parlx.js

You can also connect script via one of CDNs:
bundle.run: https://bundle.run/parlx.js
jsDelivr: https://cdn.jsdelivr.net/npm/parlx.js/
unpkg: https://unpkg.com/parlx.js/

Getting Started

Connect libary with project using script tag in HTML:

<script src="/path/to/parlx.js"></script>

ES6 import:

import Parlx from 'parlx.js';

Or CommonJS:

const Parlx = require('parlx.js');

Next use library with:

• Vanilla JavaScript e.g:

const elems = document.querySelectorAll('.parallax');

const parlx = Parlx.init({
  elements: elems,
  settings: {
    // options...
  },
  callbacks: {
    // callbacks...
  }
});

• or jQuery e.g:

Connect jQuery in HTML

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

Or include via command line and CommonJS

$ npm install jquery
$ yarn add jquery
$ bower install jquery
const jQuery = require('jquery');

And call plugin on element

$('.parallax').parlx({
  settings: {
    // options...
  },
  callbacks: {
    // callbacks...
  }
});

• Plugin supports autoinit

To use it, add data-parlx to html element e.g:

<div data-parlx></div>

Methods

• Destroy method

elems.parlx.destroy();

Options

Settings

Name Type Default Description Available options
direction string vertical Parallax element move direction vertical, horizontal, diagonal
exclude RegExp null Disable parallax effect on selected user agents e.g: /(Mozilla|iPad)/
height string 400px Height of parallax element container e.g: 500px, 70vh, auto
speed number 0.3 Parallax speed values >= -1 and <= 1
type string background Type of parallax foreground (div move), background (content move)

Callbacks

Name Description Available options
onInit Callback on plugin init el => { /* code */ }
onDestroy Callback on plugin destroy el => { /* code */ }
onResize Callback on window resize el => { /* code */ }
onScroll Callback on window scroll el => { /* code */ }

Event

parlxMove event will output current position of the parallax element

License

This project is licensed under the MIT License © 2018-present Jakub Biesiada

About

Parallax scroll effect library

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%