Easy Background Parallax Effect with jQuery - Parallaxify

Parallaxify.js is a lightweight (less than 1kb) and fast jQuery plugin for creating a background parallax effect on vertical page scrolling. The goal is to make your background image scroll at a different speed than the document but always stay within its container.

How to use it:

1. Download the plugin and include the JavaScript parallaxify.js after jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="parallaxify.js"></script>

2. Add a background image to your container.

.parallax {
  background-image      : url('1.jpg');
  background-size       : cover;
  background-position-x : 50%;
  background-position-y : 0%;
  background-repeat     : no-repeat;
  height:500px;
}

3. Enable the background parallax scrolling effect on the container.

$('.parallax').parallaxify();

---

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