header transition

by kthornbloom

HTML

<header>

<div class="headerimg"></div>
<div class="pagetitle">
<h1>
PAGE TITLE
</h1>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.
<br>
<div class="trigger"></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus...

SCSS

header {
	position:relative;
	background:#222;
}

.pagetitle {
	padding:100px 0;
	position:relative;
	text-align:center;
	h1{
		color:#fff;
		background:rgba(0,0,0,.6);
		padding:.5em;
		display:inline-block;
		font-family:sans-serif;
		font-size:3em;
	}
}

.headerimg {
	background:url('https://images.unsplash.com/1/macbook-air-iphone-moleskin.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=9f422d9237277e69e97e9f97560db5a6') center;
	background-size:cover;
	height:400px;
	width:100%;
	top:0;
	left:0;
	margin-bottom:-40px;
	transition:.5s;	
	position:fixed;
}
.headerimg-full {
	height:100%;
	width:100%;
	-webkit-filter:blur(5px);
}

.text {
	border-radius:8px;
	padding:50px;
	margin:0 auto;
	background:#fff;
	position:relative;
	font-family:sans-serif;
	line-height:1.4em;
	max-width:800px;
}

JavaScript

$(window).scroll(function () {
    var amtScrolled = $(window).scrollTop(),
        triggerAmt = 200

    if (amtScrolled >= triggerAmt) {
        $('.headerimg').addClass('headerimg-full');
    } else {
        $('.headerimg').removeClass('headerimg-full');
    }
});