ios7 blurred header

by andyjh07

HTML

<!--
iPhone mockup:
http://dribbble.com/shots/1231070-iPhone-5S-PSD-download

Photos:
http://lorempixel.com

Related thread on Reddit:
http://www.reddit.com/r/webdev/comments/1myjfh/proof_of_concept_ios7like_gaussian_blur_sticky/ccdud34
-->
<div class="phone">
	<div class="screen">
		<header>
			<h1>iOS 7 Blurred Header</h1>
		</header>
		<div class="content-wrapper">
			<div class="content">
				<ol class="messages">
					<li>
						<p>Praesent porttitor nisl vel enim consectetur, vitae dictum ipsum condimentum.</p>
					</li>
					<li>
						<p>Sed convallis lorem non augue lobortis tincidunt.</p>
					</li>
					<li>
						<img...

CSS

::-webkit-scrollbar {
	display: none;
}

html {
	font-family:"Helvetica Neue","Helvetica",sans-serif;
	font-size:1rem;
}

html,body {
	margin:0;
	padding:0;
	background:#fff;
	overflow:hidden;
}

blockquote {
	position:absolute;
	left:0;
  right:0;
	top:0;
	padding:1.5rem 0;
	margin:0;
	color:#8a8a8a;
	text-align:center;
}

.screen {
	position:absolute;
	left:95px;
	top:182px;
	width:319px;
	height:568px;
	overflow:hidden;
}

header {
	position:absolute;
	left:0;
	top:0;
	right:0;
	height:44px;
	overflow:hidden;
	background:#f8f8f8;
	z-index:2;
	box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
}

header h1 {
position: relative;
	font-family:"Helvetica Neue","Helvetica",sans-serif;
	font-weight:normal;
	font-size:1rem;
	margin:0;
	padding:0;
	line-height:44px;
	text-align:center;
  z-index: 2;
  font-weight:300;
	box-shadow:inset 0 -1px 0 rgba(255,255,255,.25);
}

.content-blurred {
	margin-top:44px;
	padding:0 1rem;
	position:absolute;
	top:0;
	left:0;
	right:0;
	-webkit-filter:blur(10px);
	filter:url(#blur-effect);
	opacity:.35;
  z-index: 1;
}

.content-wrapper {
	position:relative;
	padding:0 1rem;
	z-index:1;
	height:100%;
	overflow:auto;
  -webkit-backface-visibility:hidden;
}

.content-wrapper .content {
 	margin-top:44px;
}

.content {
	display:block;
	padding-top:1em;
}

.messages {
	margin:0;
	padding:0;
	list-style-type:none;
}

.messages li {
	display:block;
	float:left;
	clear:both;
	max-width:65%;
	margin:0 0 1rem 0;
	padding:0;
}

.messages li:nth-child(even) {
	float:right;
}

.messages li:nth-child(even) img {
	float:right;
}

.messages p {
	border-radius:.75rem;
	background:#e6e5eb;
	color:#383641;
	padding:.6875rem;
	margin:0;
	font-size:.875rem;
}

.messages li:nth-child(even) p {
	background:#158ffe;
	color:#fff;
}

.messages img {
	display:block;
	max-width:65%;
	border-radius:.75rem;
}

.phone {
	position:relative;
	width:509px;
	height:931px;
  margin:0...

JavaScript

var content = document.querySelector('.content');
var duplicate = content.cloneNode(true);
var contentBlurred = document.createElement('div');
contentBlurred.className = 'content-blurred';
contentBlurred.appendChild(duplicate);

var header = document.querySelector('header');
header.appendChild(contentBlurred);

var contentWrapper = document.querySelector('.content-wrapper'),
translation;

contentWrapper.addEventListener('scroll',function(){
  translation = 'translate3d(0,' + (-this.scrollTop + 'px') + ',0)';
  duplicate.style['-webkit-transform'] = translation;
  duplicate.style['-moz-transform'] = translation;
  duplicate.style['transform'] = translation;
});

// offset to demo blurring
contentWrapper.scrollTop = 140;