Responsive Full Size Image/Background Parallax Effect JQuery Plugin
* { margin: 0; padding: 0; }
.section-container {
position: relative;
height: 50vh;
overflow: hidden;
}
.section-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
jQuery(function($){
// PARALLAX FUNCTIN CALL
$(".parallax-object").each(function() {
parallaxObject($(this));
});
});
/* ========================================================================= */
/* PALALLAX FUNCTION */
/* ========================================================================= */
function parallaxObject(object) {
var speed, resize, reset, originalPos, windowWidth, windowHeight;
windowWidth = $(window).width();
windowHeight = $(window).height();
speed = $(object).data("speed") ? $(object).data("speed") : 0.5;
resize = $(object).data("resize") ? $(object).data("resize") : false;
resetIt(object);
resizeIt(object);
parallaxIt(object);
$(window).bind("scroll",function() {
parallaxIt(object);
});
function resetIt(object) {
var self = $(object);
originalPos = $(self).data("reset") ? $(self).parent().offset().top : 0;
}
function resizeIt(object) {
var self = $(object);
var extraHeight;
// RESIZE OBJECT TO FULL SIZE
if( resize == true ) {
extraHeight = parseInt(windowHeight * speed / 2);
self.css( "height", '+=' + extraHeight);
}
}
function parallaxIt(object) {
$(object).each(function() {
var self = $(this);
var nm = $("html").scrollTop();
var nw = $("body").scrollTop();
var n = (nm > nw ? nm : nw);
var objectPos = self.parent().offset().top;
var position = n - objectPos + originalPos;
var scrollPosition = parseInt( position * speed );
// ADD TRANSLATE OFFSET TO OBJECT
self.css({
'webkitTransform' : 'translate3d(0, ' + scrollPosition + 'px, 0)',
'MozTransform' : 'translate3d(0, ' + scrollPosition + 'px, 0)',
'msTransform' : 'translateY(' + scrollPosition + 'px)',
'OTransform' : 'translate3d(0, ' + scrollPosition + 'px, 0)',
'transform' : 'translate3d(0, ' + scrollPosition + 'px, 0)',
});
// if transform3d isn't available, use top over background-position
//$('#element').css('top', Math.ceil(n/2) + 'px');
});
}
}
A parallax effect plugin that can ensure the background size covers the whole container without causing any white space around and it is also responsive for any devices.
A Pen by Jake Zhong on CodePen.
A parallax effect plugin that can ensure the background size covers the whole container without causing any white space around and it is also responsive for any devices.
A Pen by Jake Zhong on CodePen.
<section class="section-container">
<div class="section-bg parallax-object" style="background-image: url('http://www.unsplash.it/1000/800');" data-breakpoint="768" data-resize="false" data-speed="0.5"></div>
</section>
<section class="section-container">
<div class="module-image section-bg parallax-object" style="background-image: url('http://www.unsplash.it/1200/800');" data-breakpoint="768" data-resize="true" data-speed="0.5"></div>
</section>
<section class="section-container">
<div class="module-image section-bg parallax-object" style="background-image: url('http://www.unsplash.it/1500/800');" data-breakpoint="768" data-resize="true" data-speed="0.5"></div>
</section>
<section class="section-container">
<div class="module-image section-bg parallax-object" style="background-image: url('http://www.unsplash.it/1000/600');" data-breakpoint="768" data-resize="true" data-speed="0.5"></div>
</section>