Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 2b112839e4
Fetching contributors…

Cannot retrieve contributors at this time

87 lines (73 sloc) 4.661 kb
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parallax Scrolling Tutorial</title>
<meta name="description" content="How to create a parallax scrolling effect with jQuery, HTML and CSS">
<meta name="author" content="Richard Shepherd, Smashing Magazine">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="main" role="main">
<!-- Section #1 -->
<section id="first" class="story" data-speed="8" data-type="background">
<div class="sprite1" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
<article>
<img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242" />
<p>Words and pictures by Richard Shepherd / <a href="http://twitter.com/richardshepherd" target="_blank">@richardshepherd</a> / <a href="http://richardshepherd.com">richardshepherd.com</a></p>
</article>
</section>
<!-- Section #2 -->
<section id="second" class="story" data-speed="4" data-type="background">
<article>
<h2>Background Only</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. o.</p>
<p><a href="#">And this is a link!</a></p>
</article>
</section>
<!-- Section #3 / Photos -->
<section id="third" class="story" data-speed="6" data-type="background" data-offsetY="250">
<div class="sprite3" data-type="sprite" data-offsetY="1250" data-Xposition="25%" data-speed="2"></div>
<article>
<h2>Background Only</h2>
<div class="textbox">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. o.</p>
</div>
</article>
</section>
<!-- Section #4 / HTML5 Video -->
<section id="fourth" class="story" data-speed="8" data-type="background" data-offsetY="250">
<article>
<h2>HTML5 Video</h2>
<div class="textbox">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. o.</p>
</div>
</article>
<video controls width="640" width="480" data-type="video" data-offsetY="2400" data-speed="1.5">
<source src="video/parallelparking.theora.ogv" type="video/ogg" />
<source src="video/parallelparking.mp4" type="video/mp4" />
<source src="video/parallelparking.webm" type="video/webm" />
</video>
</section>
<!-- Section #5 -->
<section id="theend" class="story" data-speed="8" data-type="background" data-offsetY="250">
<div class="sprite5" data-type="sprite" data-offsetY="-1600" data-Xposition="50%" data-speed="-2"></div>
</section>
</div> <!--! end of #main -->
<script>
var _gaq=[["_setAccount","UA-5671436-1"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.