Configurable Smooth Parallax Scroll Effect In jQuery - parallax-background.js

Yet another parallax scrolling jQuery plugin used to apply smooth parallax effects on any background images, with support for all directions (horizontal and vertical) and configurable animation speed.

How to use it:

1. Include the minified version of the jQuery parallax-background.js plugin after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/parallax-background.min.js"></script>

2. Initialize the plugin and you're ready to go.

$('.parallax').parallaxBackground();

3. Add the required CSS class 'parallax' to the target parallax container and config the parallax scrolling effect using the following data attributes:

• data-parallax-bg-image="bg.jpg": path to the background image
• data-parallax-speed="0.5": animation speed
• data-parallax-direction="up": up, down, left, right
• data-parallax-parallaxBgPosition="center center": background position
• data-parallax-parallaxBgRepeat="no-repeat": background repeat
• data-parallax-parallaxBgSize="cover": background size

<div class="parallax" 
     data-parallax-bg-image="bg" 
     data-parallax-speed="0.5" 
     data-parallax-direction="up"
     data-parallax-parallaxBgPosition="center center"
     data-parallax-parallaxBgRepeat="no-repeat"
     data-parallax-parallaxBgSize="cover"
     ...
</div>

4. You're also allowed to config the parallax scrolling effect during init.

$('.parallax').parallaxBackground({
  parallaxBgImage    : '',
  parallaxBgPosition : 'center center',
  parallaxBgRepeat   : 'no-repeat',
  parallaxBgSize     : 'cover',
  parallaxSpeed      : 0.5,
  parallaxDirection  : 'up'
});

Change log:

2017-10-26

• fixes for scroll bug & viewport improvements

2017-08-12

• v1.2: minor changes & fixes

2017-04-19

• fix for elements with padding

---

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