Now this is cool - parallax page scroll

HTML & CSS
1

Never seen this before - Wired’s Xbox 1 article has this effect on the pictures where as you scroll down through the article the picture reveals change. Look

http://www.wired.com/gadgetlab/2013/05/xbox-one/

Anyone want to help take a crack at reverse engineering this visual effect?

(And, oh yeah, they also talk about the Xbox 1)

2

Hi,

I didn’t check to see how they were doing it but you can do it quite easily with background-attachment fixed.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
	width:960px;
	margin:auto;
}
.test1 {
	height:300px;
	margin:auto;
	border:1px solid #000;
	background:#f2f2f2 url(images/zimg4.jpg) no-repeat fixed 50% 50%;
}
.test2 { background-image:url(images/zimg5.jpg) }
.test3 { background-image:url(images/zimg6.jpg) }
</style>
</head>

<body>
<div class="wrap">
		<h1>Scroll effect</h1>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<div class="test1">
				<h2>Test1</h2>
		</div>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<div class="test1 test2">
				<h2>Test2</h2>
		</div>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<div class="test1 test3">
				<h2>Test3</h2>
		</div>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
		<p>Scroll up and down</p>
</div>
</body>
</html>
3

Quite a lot of sites do that, actually, although they go to town with JS to make it even fancier: