jQuery Parallax

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.

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.

                                                        
$("#my-parallax").parallax();
                                                        
                                                    

                                                        
#my-parallax {
    background: #111 url(images/my-image.jpg) no-repeat 0px 0px;
    background-size: 100% auto;
    height: 200px;
}
                                                        
                                                    

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

                                                        
$("#my-parallax").parallax({
    image : "images/my-image.jpg",
    height : "200",
    scroll : "default"
});
                                                        
                                                    

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

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

                                                        
$("#my-parallax").parallax({
    image : "images/my-image.jpg",
    height : "200",
    scroll : "manual"
});
                                                        
                                                    

                                                        
$(document).scroll(function() {
    
    var scrollPosition = $(this).scrollTop();
    
    $("#example-3").parallaxScroll(scrollPosition);
    
});
                                                        
                                                    

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

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

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

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

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

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

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

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

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

                                                        
<div id="my-parallax" class="parallax parallax-dark parallax-no-border"></div>
                                                        
                                                    

                                                        
<div id="my-parallax" class="parallax parallax-dark parallax-with-shadow"></div>
                                                        
                                                    

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.