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="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></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:

2014-03-17

• 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.