Simple Background Parallax Scrolling Effect With jQuery

Yet another jQuery plugin adds parallax (background) scrolling effect to your website. Instead of scrolling the elements itself it will copy them and fix them on the background. Using this method we can achieve a way higher performance and won't have any flickering when scrolling. Based on the Spotify website.

See also:

• Spotify-Like Parallax Scrolling Effect with jQuery - Parallax.js
• Simple Spotify-Like jQuery Image Parallax Effect Plugin - Parallax ImageScroll

How to use it:

1. Include jQuery library and the jQuery Parallax Scrolling on your web page.

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

2. Wrap your parallax imagess into 'photowrap' containers.

<div class="photowrap">
  <img src="1.jpg" class="bgimages">
</div>

3. Wrap your document content into 'contentwrap' containers.

<div class="contentwrap">

  Your content goes here

</div>

4. The required CSS styles to set position properties to the containers.

.contentwrap {
  position: relative;
  padding: 120px 20%;
  z-index: 5;
  background: white;
  text-align: center;
}

.photowrap {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.photowrap img { width: 100%; }

4. Call the function on document ready to active the parallax scrolling effect.

$(document).ready(function(){
$.parallax({
  photowrap: ".photowrap",
  speed: .75 // This has to be a number from 0 to 1.
});
});

Change log:

2015-10-11

• Add document read check

2014-08-03

• Hide complete photowrap instead of just the img

---

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