zoom out parallax hero
HTML
<header>
<div class="bg-parallax bg-img1"></div>
</header>
<div class="fullwidthtitle">
<h1 class="content-title">Zoom Out <strong>Header</strong></h1>
</div>
<div class="gap"></div>
CSS
header {
position: relative;
height: 600px;
overflow: hidden;
}
.logo {
position: absolute;
top: 50%;
height: 100px;
width: 100%;
margin-top: -50px;
background: url("https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg") center center no-repeat;
}
.bg-parallax {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -5;
}
.bg-img1 {
background: url("http://themes.cray.bg/amy/style-1/wp-content/uploads/sites/2/2014/07/artgerm-avatar-the-legend-of-2642996-1920x1333-1920x1080.jpg") center center no-repeat fixed;
background-size: 100%;
}
.gap {
height: 1000px;
}
.fullwidthtitle {
margin-top: -2px;
padding-bottom: 108px;
}
.fullwidthtitle .content-title{
background: rgba(168, 113, 193, 1) none repeat scroll 0 0;
box-sizing: border-box;
color: #fff !important;
padding: 37px 14px 39px;
position: absolute;
text-align: center;
width: 100%;
z-index: 6;
}
.content-title, .content-title a, .comment-reply-title, .h-style h2, h2.wpb_heading {
font-family: Open Sans;
font-style: normal;
font-weight: 300;
}
.content-title {
color: #777;
display: block;
font-size: 30px;
line-height: 32px;
margin-bottom: 0;
padding-bottom: 10px;
}
JavaScript
var height = $('header').height();
//var logo = $('.logo');
var background = $('.bg-parallax');
$(window).on('scroll', function() {
var scroll = $(this).scrollTop();
// logo.css('transform', 'translateY(' + scroll / 0.7 + '%)');
var backgroundSize = 200 - (0 - (height - scroll) / height * 10);
backgroundSize = backgroundSize < 100 ? 100 : backgroundSize;
background.css('background-size', backgroundSize + '%');
});