Link to Files

                    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="js/paralmax-min.js" type="text/javascript"></script>
                    
                

Set up Codes

HTML Code

Simply add class .parallax-object to the elements that you want to parallax.

                    
<div class="parallax-object">
    <img src="images/2.jpg" alt="">
</div>
                    
                

JQuery Call

                    
jQuery(function($){
	
	$(window).on('load', function() {
        // PARALLAX FUNCTIN CALL
        $(".parallax-object").paralmax();
    });

});
                    
                

No built-in CSS is used/necessary, just style your elements to however you like before you parallax them.

HTML Data Options

Speed ( float, from 0 to x.0 )

0 means the parallax element will be fixed in place. 1 means the same speed as page scrolling speed, x.0 Means x times of the page scrolling speed. Default is 0.5.

                    
<div data-speed="0.5"></div>
                    
                

Resize ( boolean, true or false )

Resize the image to cover the whole parallax area, usually used for full-size background image that has smaller size than the container.

                    
<div data-resize="true"></div>
                    
                

Offset ( float, from 0 to 1 )

0 means the parallax element will not have any offset from it's top, 1 means the parallax element will be posited to it's bottom when it starts, default is 0.

                    
<div data-offset="0.5"></div>
                    
                

Breakpoint ( boolean, true or false )

Disable paralalx effect while below the specific screen size.

                    
<div data-breakpoint="768"></div>
                    
                

Demo

Full Size Background Image

Run Demo Download Demo

HTML Code

                    
<section class="parallax-background-container">
    <div class="section-bg parallax-object" style="background-image: url('../images/1.jpg');" data-breakpoint="768" data-resize="true" data-speed="0.5"></div>
</section>

<section class="parallax-background-container">
    <div class="section-bg parallax-object" style="background-image: url('../images/2.jpg');" data-breakpoint="768" data-resize="true" data-speed="0.5"></div>
</section>

<section class="parallax-background-container">
    <div class="section-bg parallax-object" style="background-image: url('../images/3.jpg');" data-breakpoint="768" data-resize="true" data-speed="0.5"></div>
</section>

<section class="parallax-background-container">
    <div class="section-bg parallax-object" style="background-image: url('../images/4.jpg');" data-breakpoint="768" data-resize="true" data-speed="0.5"></div>
</section>
                    
                

CSS Code

                    
.parallax-background-container { 
    height: 100vh;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

.section-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}
                    
                

Different Speeds Free Parallax Elements

Run Demo Download Demo

HTML Code

                    
<section class="parallax-element-container">
    <div class="parallax-object element" id="e1" data-speed="0.5">
        <img src="../images/1.jpg">
    </div>
    <div class="parallax-object element" id="e2" data-speed="0.1">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
    </div>
    <div class="parallax-object element" id="e3" data-speed="0.2">
        <img src="../images/2.jpg">
    </div>
    <div class="parallax-object element" id="e4" data-speed="0.3">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
    </div>
    <div class="parallax-object element" id="e5" data-speed="0.1">
        <img src="../images/3.jpg">
    </div>
    <div class="parallax-object element" id="e6" data-speed="0.2">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
    </div>
    <div class="parallax-object element" id="e7" data-speed="0.1">
        <img src="../images/4.jpg">
    </div>
    <div class="parallax-object element" id="e8" data-speed="0.2">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
    </div>
    <div class="parallax-object element" id="e9" data-speed="0.1">
        <img src="../images/5.jpg">
    </div>
</section>
                    
                

CSS Code

                    
.parallax-element-container { position: relative; height: 4500px; background-color: #333; }

.element { position: absolute; width: 300px; height: 300px; }

.element img { width: 100%; height: 100%; border-radius: 50%; }

.element h2 { color: #fff; }

#e1 { top: 200px; left: 10%; }
#e2 { top: 600px; right: 10%; }
#e3 { top: 1000px; left: 20%; }
#e4 { top: 1400px; right: 30%; }
#e5 { top: 1800px; left: 10%; }
#e6 { top: 2200px; left: 30%; }
#e7 { top: 2600px; right: 10%; }
#e8 { top: 3000px; left: 20%; }
#e9 { top: 3400px; right: 30%; }