Introduction

jQuery Parllax library is an open-source library for generating beautiful parallax effect with a few lines of JavaScript. What differentiates it from other similar libraries is that it comes with an image preloader and a custom scroll function - which is especially useful for those that use custom content scrollers.

jQuery Library

While the library required jQuery before, it was restructured to support pure Vanilla JS implementation. Comprehensive examples can be found bellow.

Examples

You will find several examples with the code bellow. However, you should keep in mind that all Parallax instances have following initial settings:

                                                    
var settings = {
    image : "./demo/img/1.jpg",
    height : "400",
    scroll : "default"
};
                                                    
                                                

Allowed parameters are:

  • image - String containing image location.
  • height - Number representing required height of the parallax window.
  • scroll - Scroll type, either default or manual.

Without Parameters

JavaScript
                                                        
$("#my-parallax").parallax();
                                                        
                                                    
CSS
                                                        
#my-parallax {
    background: #111 url(images/my-image.jpg) no-repeat 0px 0px;
    background-size: 100% auto;
    height: 200px;
}
                                                        
                                                    
HTML
                                                        
<div id="my-parallax" class="parallax parallax-dark"></div>
                                                        
                                                    

This example is the most complicated one, but it may be useful to people that want to manage Parallax window using CSS and CSS only.

With Parameters

JavaScript
                                                        
$("#my-parallax").parallax({
    image : "images/my-image.jpg",
    height : "200",
    scroll : "default"
});
                                                        
                                                    
HTML
                                                        
<div id="my-parallax" class="parallax parallax-dark"></div>
                                                        
                                                    

This example is for people that want a quick and easy implementation.

Manual Scroll

JavaScript - Setup
                                                        
$("#my-parallax").parallax({
    image : "images/my-image.jpg",
    height : "200",
    scroll : "manual"
});
                                                        
                                                    
JavaScript - Scroll
                                                        
$(document).scroll(function() {
    
    var scrollPosition = $(this).scrollTop();
    
    $("#example-3").parallaxScroll(scrollPosition);
    
});
                                                        
                                                    
HTML
                                                        
<div id="my-parallax" class="parallax parallax-dark"></div>
                                                        
                                                    

This example demonstrates the usage of parallaxScroll function which may be especially useful to people with custom scrollers on their websites.

Different Themes

Several themes exist that you can use out of the box.

Default theme with background #F65D96 activated using parallax-default class.

Default Theme
                                                        
<div id="my-parallax" class="parallax parallax-default"></div>
                                                        
                                                    

Dark theme with background #111111 activated using parallax-dark class.

Dark Theme
                                                        
<div id="my-parallax" class="parallax parallax-dark"></div>
                                                        
                                                    

Light theme with background #FFFFFF activated using parallax-light class.

Light Theme
                                                        
<div id="my-parallax" class="parallax parallax-light"></div>
                                                        
                                                    

Tweaking

You can easily tweak your parallax window without customizing existing CSS or SASS files.


To generate parallax window without a border, just user parallax-no-border class.
                                                        
<div id="my-parallax" class="parallax parallax-dark parallax-no-border"></div>
                                                        
                                                    
To generate parallax window with inset shadow, just user parallax-with-shadow class.
                                                        
<div id="my-parallax" class="parallax parallax-dark parallax-with-shadow"></div>
                                                        
                                                    

Support

If you encounter any issues while using the library, please don't hesitate to let me know. Any reported issue will be fixed as soon as possible, and you'll be notified immediately afterwards - via your preferred contact method.

Support

There are several ways you can contact me:

  • Email Address
  • GitHub
  • Twitter

For general or business inquires, please use the following email address: office@djordjejocic.com

For support inquires, please use the following email address: support@djordjejocic.com

Additionally you can submit an issue over GitHub by clicking here.

And you can follow me on Twitter to get notifications regarding the updates by clicking here.