This time I will share jQuery Plugin and tutorial about Easy Background Parallax Effect with jQuery – Parallaxify, hope it will help you in programming stack.
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.
1 |
< script src = "//code.jquery.com/jquery-1.11.3.min.js" ></ script > |
2 |
< script src = "parallaxify.js" ></ script > |
2. Add a background image to your container.
2 |
background-image : url ( '1.jpg' ); |
3 |
background-size : cover; |
4 |
background-position-x : 50% ; |
5 |
background-position-y : 0% ; |
6 |
background- repeat : no-repeat ; |
3. Enable the background parallax scrolling effect on the container.
1 |
$( '.parallax' ).parallaxify(); |
This awesome jQuery plugin is developed by alitorbati. For more Advanced Usages, please check the demo page or visit the official website.