<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>
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(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.
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 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>
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>
Disable paralalx effect while below the specific screen size.
<div data-breakpoint="768"></div>
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;
}
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%; }