Minimalist Background Parallax Scrolling Effect with jQuery

File Size: 116 KB
Views Total: 1585
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimalist Background Parallax Scrolling Effect with jQuery

Just another jQuery & CSS solution to implement a simple background image parallax effect as you scroll down the web page.

How to use it:

1. Create a DIV elements for the parallax image.

<div class="bg"></div>

2. The needed CSS styles to add an background image into the DIV element and make its background position is fixed.

.bg {
  background: url("Path to your image") repeat;
  position: fixed;
  width: 100%;
  height: 200%;
  top: 0;
  left: 0;
  z-index: -1;

3. Include the latest version of jQuery library at the bottom of your parallax scrolling website.

<script src="//"></script>

4. Enable the background parallax scrolling effect using a little Javascript (jQuery) magic.


function parallax(){
  var scrolled = $(window).scrollTop();

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