Super Simple jQuery Based Parallax Scrolling Effect

Super Simple jQuery Based Parallax Scrolling Effect
File Size: 79.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A super simple and lightweight jQuery solution to apply a cross browser parallax scrolling effect on your background images.

How to use it:

1. Include the latest version of jQuery library from a CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Set a background image to your container.

body {
background-image: url();
}

3. Set the background-attachment for body to "fixed" so that we can control it's scroll speed.

$('body').css('background-attachment', 'fixed');

4. Attach a function to watch the window.scroll event, and move the background image slower than the content scroll.

$('body').css('background-attachment', 'fixed');

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