Background Parallax Scrolling Effect with jQuery and CSS3 - xsParallax

File Size: 3.37 MB
Views Total: 5079
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">

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

  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.


  // 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'




  • removed unnecessary codes


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