Easy Background Parallax Effect with jQuery - Parallaxify
File Size: | 2.88 KB |
---|---|
Views Total: | 4305 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.