Background Parallax Scrolling Effect with jQuery and CSS3 - xsParallax

xsParallax.js is a simple jQuery plugin that provides a simple way to implement vertical or horizontal Parallax scrolling effects on your background images. Powered by CSS3 transitions.

How to use it:

1. Include jQuery library and the jQuery xsParallax.js script on your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="xsparallax.js"></script>

2. Prepare your background images (xspl-bg-1.jpg, xspl-bg-2.jpg, ...) and put them into the xspl-backgrounds folder.

3. The markup structure.

<div id="parallax">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

4. Call the plugin on the 'parallax' element to add images as parallax backgrounds to its child elements

$('#parallax').xsParallax({
  direction: 'vertical',
  offset: 0
});

5. The core CSS/CSS3 style rules for the parallax scrolling effect.

.xspl-layer {
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-attachment: fixed;
}

.horizontal { overflow: hidden; }

.scroll-stage {
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.horizontal .xspl-layer {
  float: left;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -ms-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
}

6. All the default settings.

$('#parallax').xsParallax({

  // background folder
  bgFolder: 'xspl-backgrounds',

  // file extension
  fileExtension: '.jpg',

  // animation speed
  speed: 5,

  // distance where the layer start scrolling
  offset: 100,
 
  // vertical or horizontal
  direction: 'vertical'

});

Changelog:

2018-09-21

• removed unnecessary codes

2015-01-29

• used images and position:fixed to gain the same effect with desktop

---

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