<body>
<div class="page">
<div class="intro-header">
<div class="bg-image parallax-bg"></div>
<div class="header-content row">
<h1>Majestic Title</h1>
<h2>An awesome subtitle</h2>
</div>
</div>
<div class="content">
<div class="row">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore hic ipsum quam est et asperiores recusandae deleniti voluptatem maxime dignissimos sapiente quisquam maiores modi dolorum ipsa id accusantium, alias, voluptate.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque delectus magni hic consequuntur ipsum, itaque atque laudantium sequi odio impedit tenetur, ipsam debitis modi dolore? Veniam ad laudantium fugiat!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur eaque, sunt aliquam quasi obcaecati non in corporis necessitatibus est ab consequuntur cum quaerat nihil quod, odio dolor aut, dolore labore!
</p>
</div>
</div>
</div>
</body>@import url(https://fonts.googleapis.com/css?family=Leckerli+One);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
padding: 0;
margin: 0;
height: 100%;
font-family: 'Open Sans', sans-serif;
color: #fff;
}
h1, h2 {
margin: 0;
font-family: 'Leckerli One', cursive;
text-shadow: 0 2px rgba(0,0,0,.5);
}
.row {
max-width: 80%;
margin: 0 auto;
}
.intro-header {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
display: table;
z-index: -1;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
z-index: 1;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('http://cdn.magdeleine.co/wp-content/uploads/2015/02/YS4_5968_69_70-2-3-1400x933.jpg') center center no-repeat;
background-size: cover;
}
.header-content {
position: relative;
text-align: center;
display: table-cell;
vertical-align: middle;
z-index: 2;
}
}
.content {
height: 100vh;
padding: 50px;
background: #333;
margin-top: 100vh;
}var $parallaxElement = $('.parallax-bg');
var elementHeight = $parallaxElement.outerHeight();
function parallax() {
var scrollPos = $(window).scrollTop();
var transformValue = scrollPos/40;
var opacityValue = 1 - ( scrollPos / 2000);
var blurValue = Math.min(scrollPos / 100, 3);
if ( scrollPos < elementHeight ) {
$parallaxElement.css({
'transform': 'translate3d(0, -' + transformValue + '%, 0)',
'opacity': opacityValue,
'-webkit-filter' : 'blur('+blurValue+'px)'
});
}
}
$(window).scroll(function() {
parallax();
});
External CSS
This Pen doesn't use any external CSS resources.