Tiny Parallax Background Plugin For jQuery - parlx

Tiny Parallax Background Plugin For jQuery - parlx
File Size: 3.09 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

parlx is an extremely lightweight jQuery plugin used to create parallax scrolling effects by altering the background position using CSS3 2D transforms (translateY).

How to use it:

1. Include the latest version of jQuery library and the jQuery parlx plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="js/parlx.js"></script>

2. Add a background image to your parallax container.

<section class="parallax">
  <div class="bgimg" style="background-image: url(1.jpg);">

3. The required CSS styles.

.parallax {
  z-index: 10;
  position: relative;
  height: 400px;
  overflow: hidden;

.bgimg {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;

4. Activate the parallax scrolling effect by calling the function on the parallax container on window load/resize/scroll.

$(window).on("load resize scroll", function() {

5. Adjust the default animation speed.

$(window).on("load resize scroll", function() {
    speed: 0.3

6. Set custom height.

$(window).on("load resize scroll", function() {
    height: '400px'

7. Enable or disable the parallax scroll on mobile devices.

$(window).on("load resize scroll", function() {
    mobile: true

8. Set the direction of the parallax scrolling.

$(window).on("load resize scroll", function() {
    direction: 'vertical', // or horizontal, diagonal

9. Set parallax effect to background image or div.

$(window).on("load resize scroll", function() {
    type: 'back' // or front

10. You can also specify the options for each parallax content using data attributes:


Change log:

v1.1.0 rc 1 (2018-06-10)

  • redesigned demo page (new header view, dark theme)
  • re-added support for image tag as a background
  • added autoinit
  • fixed parallax background size bug
  • updated README.md
  • renamed jQuery plugin from Parlx() to parlx()
  • code cleaned up
  • renamed type option values (back to background and front to foreground)
  • added parlxMove event
  • fixed bug with autoinit in Node.js
  • fixed bug with jQuery and Node.js compatibility
  • updated dependencies


  • JS update


  • Bugfix


  • v4.0


  • v3.1.1: Code cleaned up


  • v2.1.1


  • v2.0.13

This awesome jQuery plugin is developed by JB1905. For more Advanced Usages, please check the demo page or visit the official website.