Smooth Background Parallax Scrolling Effect with jQuery and CSS3

Parascroll is a lightweight and fast jQuery plugin to create salient, eye-catching, smooth parallax scrolling effects on your background images. Based on jQuery and CSS translate3d & position: relative.

Basic Usage:

1. Create a container with parallax content as follows

<div class="parascroll">
  <div class="scrollable"></div>
  <div class="paraContent">
    Your content goes here
  </div>
</div>

2. Add a background image to the container in your CSS.

.scrollable {
  background: url(demo.jpg) no-repeat 50% 50%;
}

3. Load jQuery library and jQuery Parascroll plugin at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="jquery.parascroll.js"></script> 

4. The required CSS/CSS3 styles.

.parascroll {
  position: relative;
  transform: translate3d(0px, 0px, 0px);
}
.paraContent { position: relative }

5. Call the plugin on the container you just created to active the parallax scrolling effect.

$('.parascroll').parascroll();

---

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