Minimalist Cross-browser Parallax Scrolling Effect In jQuery

File Size: 2.78 KB
Views Total: 2506
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimalist Cross-browser Parallax Scrolling Effect In jQuery

A jQuery implementation of the Parallax Scrolling Effect that simply alters the background position of your background image on window scroll.

How to use it:

1. Create a container element in which you want to place the parallax background image.

<div class="parallax">

2. Add a background image to the container element.

  1. The image' height must higher than the container's height.
  2. The background-attachment property must be set to fixed.
  background-attachment: fixed;
  background-image: url('bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 700px;

3. Import the latest version of jQuery JavaScript library into the page.

<script src="" 

4. The main function for the parallax scrolling effect.

function parallax() {
  var scrolled = $(window).scrollTop() + 1;
  $('.parallax').css('background-position', '0' + -(scrolled * 0.3) + 'px');

5. Activate parallax scrolling effect on window scroll. Done.

$(window).scroll(function (e) {

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