Tiny Parallax Background Plugin For jQuery - parlx

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

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

Installation:

# NPM
$ npm install parlx.js --save

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.3.1.slim.min.js"></script>
<script src="js/parlx.js"></script>
<!-- OR FROM CDON -->
<script src="https://cdn.jsdelivr.net/npm/parlx.js/"></script>

2. Add a background image to your parallax container.

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

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() {
  $('.bgimg').parlx();
});

5. Or use the data-parlx attribute to initialize the plugin without any JS call.

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

6. Adjust the default animation speed.

<div class="bgimg" data-speed="0.1">
</div>
// or
$('.bgimg').parlx({
  settings: {
    speed: 0.3
  }
});

7. Set custom height.

<div class="bgimg" data-height="400px">
</div>
// or
$('.bgimg').parlx({
  settings: {
    height: '400px'
  }
});

8. Enable or disable the parallax scroll on selected user agents

<div class="bgimg" data-exclude="/(iPod|iPhone|iPad|Android)/">
</div>
// or
$('.bgimg').parlx({
  settings: {
    exclude: '/(Mozilla|iPad)/'
  }
});

9. Set the direction of the parallax scrolling.

<div class="bgimg" data-direction="vertical">
</div>
// or
$('.bgimg').parlx({
  settings: {
    direction: 'vertical', // or horizontal, diagonal
  }
});

10. Apply the parallax effect to any DIV.

<div class="element" data-type="foreground">
</div>
// or
$('.element').parlx({
  settings: {
    type: 'foreground'
  }
});

11. Callback functions available.

// or
$('.element').parlx({
  callbacks: {
    onInit: el => { /* code */ }
    onDestroy: el => { /* code */ }
    onResize: el => { /* code */ }
    onScroll: el => { /* code */ }
  }
});

Changelog:

v2.0.4 (2019-04-12)

  • Fix incorrect scrolling behavior in Edge

v2.0.3 (2019-03-22)

  • fixed CDN undefined bug

v2.0.0 (2019-03-07)

  • auto init is active only if element with data-parlx exists
  • create .parlx-children if not exists
  • reenabled auto init
  • reenabled jQuery support
  • Doc update

v1.3.1 (2018-10-07)

  • new callbacks: onScroll, onResize

v1.3.0 (2018-07-16)

  • switched from Gulp to Webpack
  • updated Babel to v7
  • only 2 dist version
  • changed main file from parlx.js to parlx.min.js
  • moved demo to gh-pages branch

v1.2.0 (2018-07-08)

  • added support for all HTML5 tags as parallax div children

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

2018-01-15

  • JS update

2018-01-15

  • Bugfix

2017-12-06

  • v4.0

2017-11-29

  • v3.1.1: Code cleaned up

2017-10-14

  • v2.1.1

2017-08-25

  • 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.