Minimal jQuery Background Parallax Scrolling Plugin

File Size: 1.96 MB
Views Total: 7325
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal jQuery Background Parallax Scrolling Plugin

Just another jQuery plugin for easily and quickly creating a simple background image parallax scrolling effect on your page.

How to use it:

1. Include the necessary javascript files at the bottom of the html document.

<script src=""></script>
<script src=""></script>
<script src="js/parallax.js"></script>

2. Create parallax sections with required CSS class of 'parallax'.

<section class="bg1 parallax"></section>
<section class="bg2 parallax"></section>

3. The required CSS to style the plugin and set the background images.

.parallax {
position: relative;
margin: 1000px auto;
width: 100%;
height: 500px;
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover
.parallax.bg1 {
background-image: url(../images/landscape1.jpg)
.parallax.bg2 {
background-image: url(../images/landscape2.jpg)

Change log:


  • Adding nicescroll to fix scrolling issues in IE.

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