Permalink
Browse files

More tweaks before this goes live ;)

  • Loading branch information...
1 parent 24d3f74 commit 9c08cb1205b9a7053c41f4728bb55df39269f114 @richardshepherd committed Jul 12, 2011
Showing with 48 additions and 22 deletions.
  1. +24 −0 README.md
  2. +2 −3 css/style.css
  3. +6 −5 index.html
  4. +16 −14 js/script.js
View
@@ -0,0 +1,24 @@
+Parallax Scrolling
+==================
+
+### The source code which accompanies the parallax scrolling tutorial in Smashing Magazine, July 2011
+
+
+# INTRODUCTION:
+Welcome! And you are most welcome. These files accompany a tutorial in Smashing Magazine which explains the finer points of parallax scrolling. They will make most sense when read/used in conjunction with that article. I have used a couple of bits from the lovely HTML5 Boilerplate, but the rest is my own work. Feel free to hack it to shreds for your own purposes :)
+
+Email me The Simpsons reference in the source code and you win a free tweet. Or something. Probably.
+
+[Read the full tutorial over at smashingmagazine.com/](http://www.smashingmagazine.com/)
+
+
+### License:
+MIT License
+
+Copyright (c) 2011 Richard Shepherd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
@@ -9,6 +9,8 @@
*/
+article h2 { font-family: 'Lobster Two'; font-size: 60px; margin: 25px 0; line-height: 1em; }
+
.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);}
#first { background: url(../images/puckered.png) 50% 0 no-repeat fixed; }
@@ -28,19 +30,16 @@
/* Background Only */
#second { padding: 50px 0;}
#second article { background: url(../images/grain.png) repeat #333; color: #fff; width: 445px; margin-left: 100px; padding: 10px 20px; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1); }
-#second article h2 { width: 445px; height: 69px; text-indent: -9999px; background: url(../images/background-only.png); margin: 25px 0;}
#second article p { margin-bottom: 25px; }
#second article a { color: #ff0;}
/* Photograph */
#third article { background: url(../images/grain.png) repeat #333; color: #fff; padding: 10px 20px; margin: 100px 0 0 60%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1); }
#third .photograph { background: url(../images/photo.png) transparent 40% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
-#third article h2 { padding: 10px 0; }
#third article p { width: 300px; margin-bottom: 25px; }
/* HTML5 Video */
#fourth article { margin-left: 10%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0; }
-#fourth article h2 { width: 661px; height: 66px; text-indent: -9999px; background: url(../images/scroll-a-video.png) center bottom no-repeat; padding: 50px 0 25px 0; }
#fourth article p { width: 300px; margin: 50px 0; }
#fourth video { position: fixed; left: 50%; box-shadow: 0 0 25px rgba(0,0,0,0.7); z-index: 1;}
View
@@ -2,16 +2,16 @@
<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">
+ <!-- Mmmmm, Google Web Fonts. That's a paddlin'. -->
+ <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>
@@ -72,11 +72,12 @@
</video>
</section>
- <!-- Section #5 -->
+ <!-- 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 -->
+
+ </div> <!-- // End of #main -->
View
@@ -1,12 +1,12 @@
-/* Parallax Scrolling Tutorial
- For Smashing Magazine
- July 2011
-
- Author: Richard Shepherd
- www.richardshepherd.com
- @richardshepherd
-
-*/
+/**
+ * Parallax Scrolling Tutorial
+ * For Smashing Magazine
+ * July 2011
+ *
+ * Author: Richard Shepherd
+ * www.richardshepherd.com
+ * @richardshepherd
+ */
// On your marks, get set...
$(document).ready(function(){
@@ -30,7 +30,8 @@ $(document).ready(function(){
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
- $(window).scroll(function(){
+ // When the window is scrolled...
+ $(window).scroll(function() {
// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
@@ -55,7 +56,7 @@ $(document).ready(function(){
$('[data-type="sprite"]', $self).each(function() {
// Cache the sprite
- $sprite = $(this);
+ var $sprite = $(this);
// Use the same calculation to work out how far to scroll the sprite
var yPos = -($window.scrollTop() / $sprite.data('speed'));
@@ -68,10 +69,11 @@ $(document).ready(function(){
// Check for any Videos that need scrolling
$('[data-type="video"]', $self).each(function() {
- // Cache the sprite
- $video = $(this);
+ // Cache the video
+ var $video = $(this);
- // Use the same calculation to work out how far to scroll the sprite
+ // There's some repetition going on here, so
+ // feel free to tidy this section up.
var yPos = -($window.scrollTop() / $video.data('speed'));
var coords = (yPos + $video.data('offsetY')) + 'px';

0 comments on commit 9c08cb1

Please sign in to comment.