Minimal Parallax Effect with jQuery and CSS3 Transforms - Parallax Scroll

Parallax Scroll is an extremely lightweight jQuery plugin which allows you to implement a familiar Parallax effect with your background image on vertical page scrolling.

How to use it:

1. Make sure to load the jQuery parallax scroll plugin after you have jQuery library installed.

<script src="jquery.min.js"></script>
<script src="parallaxScroll.js"></script>

2. All content that is part of the parallax scroll section should be contained in a single div with an unique id.

<div id="container">
  ...
</div>

3. An optional div containing contents to be faded out may also be included. It may be inside or outside of the content div, depending on your styling/organizational needs/preferences.

<div id="fade">
  <h1>Scroll down to see the magic!</h1>
</div>

4. Enable the plugin and override the options to customize the parallax scrolling effect.

new jQPS({

  // container id
  containerId: "demo",

  // path to your background image
  backgroundImgUrl: "bg.jpg",

  // fadeElementId is optional
  fadeElementId: "fade",

  // scroll speed,
  // 1-5
  scrollSpeed: 2

});

Change log:

2015-07-11

• Fix Firefox opacity bug
• Fix #fade alignment Safari bug

---

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