Simple Background Parallax Scrolling Effect With jQuery

Simple Background Parallax Scrolling Effect With jQuery
File Size: 1.75 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.