Delving into the world of parallax effects, I'm on a quest to achieve a captivating zoom-out effect while scrolling. However, I'm encountering an issue where the image shrinks beyond the browser width and the div's height.
In the example provided, you'll notice that the red background of the wrapper section becomes visible as you scroll down.
Feel free to check out the live example at www.adamkhourydesign.com/test
HTML
<header id="header_container">
<div class="header_back"></div>
<div class="logo"></div>
</header>
CSS
#header_container {
position: relative;
height: 600px;
background-color: rgba(255, 100, 85, 0.5);
background-repeat: no-repeat;
background-size: auto 800px;
background-position: top center;
background-attachment: fixed;
overflow: hidden;
}
.logo {
height: 100px;
width: 100%;
background-image: url(../img/name.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
margin-top: -50px;
}
.header_back {
position: relative;
height: 600px;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
background-image: url(../img/header_bg.jpg);
overflow: hidden;
}
jQuery
var pContainerHeight = $('#header_container').height();
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
var wZoomIn = 1+(wScroll*.0005);
var wZoomOut = 1-(wScroll*.00005);
if (wScroll <= pContainerHeight) {
$('.header_back').css({
'transform' : 'scale('+ wZoomOut +')'
});
$('.logo').css({
'transform' : 'translate(0px, '+ wScroll /0.7 +'%)'
});
}