Permalink
Browse files

Renaming the background.html file

  • Loading branch information...
1 parent 9c08cb1 commit 484a8921952f1008aeb91824e8ff6d6aa9a32d25 @richardshepherd committed Jul 12, 2011
Showing with 92 additions and 2 deletions.
  1. +90 −0 background.html
  2. +2 −2 index.html
View
@@ -0,0 +1,90 @@
+<!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 href='http://fonts.googleapis.com/css?family=Lobster+Two:700&v2' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" href="css/reset.css">
+ <link rel="stylesheet" href="css/style.css">
+
+</head>
+
+<body>
+
+ <div id="main" role="main">
+
+ <!-- Section #1 / Intro -->
+ <section id="first" class="story" data-speed="8" data-type="background">
+ <div class="smashinglogo" 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 / Twitter: <a href="http://twitter.com/richardshepherd" target="_blank">@richardshepherd</a> / Web: <a href="http://richardshepherd.com">richardshepherd.com</a></p>
+ <p>GitHub: <a href="https://github.com/richardshepherd/Parallax-Scrolling/">Fork it here!</a></p>
+ </article>
+ </section>
+
+ <!-- Section #2 / Background Only -->
+ <section id="second" class="story" data-speed="4" data-type="background">
+ <article>
+ <h2>Background Only</h2>
+ <p>In this section we are sliding the background at a different speed to the rest of the page.</p>
+ <p>As this text box is scrolling at the same speed as the page, and faster than the background, it creates this lovely parallax effect.</p>
+ <p>You can find all the HTML, CSS and the all important JavaScript files over at <a href="https://github.com/richardshepherd/Parallax-Scrolling">GitHub</a> - so why don't you drop by for some hardcore forking action?</p>
+ <p>Backgrounds for this article were taken from the May/June 2011 Smashing Magazine Desktop backgrounds.</p>
+ <p>Head back to <a href="http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/">Smashing Magazine</a>, or hop on over to <a href="http://richardshepherd.com">RichardShepherd.com</a>.</p>
+ </article>
+ </section>
+
+ <!-- Section #3 / Photos -->
+ <section id="third" class="story" data-speed="6" data-type="background" data-offsetY="250">
+ <div class="photograph" data-type="sprite" data-offsetY="1250" data-Xposition="25%" data-speed="2"></div>
+ <article>
+ <h2>Scrolling Sprites</h2>
+ <div class="textbox">
+ <p>The next step in your parallax scrolling adventure is to create some sprites!</p>
+ <p>I have cut out one of the photos in this background and use it as a sprite. It scrolls at a different speed to the background <i>and</i> the window, and it's this effect that's used so well on Nike Better World and other parallax sites..</p>
+ <p>Using too many sprites can slow down older computers, and you need to use some clever maths (and trial & error!) to work out their placement on the page.</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 / The End-->
+ <section id="theend" class="story" data-speed="8" data-type="background" data-offsetY="250">
+ <div class="byebye" 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>
View
@@ -36,8 +36,8 @@ <h2>Background Only</h2>
<p>In this section we are sliding the background at a different speed to the rest of the page.</p>
<p>As this text box is scrolling at the same speed as the page, and faster than the background, it creates this lovely parallax effect.</p>
<p>You can find all the HTML, CSS and the all important JavaScript files over at <a href="https://github.com/richardshepherd/Parallax-Scrolling">GitHub</a> - so why don't you drop by for some hardcore forking action?</p>
- <p>Backgrounds for this article were taken from the May/June 2011 Smashing Magazine Desktop backgrounds. <a href="">Alien</a> from <a href="">######</a>, <a href="">Photos</a> from <a href="">#####</a>, <a href="">Park</a> from <a href="">######</a>.</p>
- <p>Head back to <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, or hop on over to <a href="http://richardshepherd.com">RichardShepherd.com</a>.</p>
+ <p>Backgrounds for this article were taken from the May/June 2011 Smashing Magazine Desktop backgrounds.</p>
+ <p>Head back to <a href="http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/">Smashing Magazine</a>, or hop on over to <a href="http://richardshepherd.com">RichardShepherd.com</a>.</p>
</article>
</section>

0 comments on commit 484a892

Please sign in to comment.