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

Configurable Smooth Parallax Scroll Effect In jQuery - parallax-background.js
File Size: 64.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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