Intro image, fixed affix

README.md

@@ -1,7 +1,11 @@
-New landing page for HabitRPG (Feb 2014)
+New landing page for HabitRPG
 ======================
+## (February 2014)
 
-# Scrolling animations
+
+## Scrolling animations
 I’ve included a wireframe that shows the interactions I’m looking for. There are also comments in the HTML file.
 
 Thinking of using [ScrollMagic](http://janpaepke.github.io/ScrollMagic/) but if there’s anything anyone else knows and can implement quickly, I’m all ears!
+
+@lefnire suggests [Skrollr](https://github.com/Prinzhorn/skrollr), so that’s another option!

home.html

@@ -77,7 +77,7 @@
 		<div class="page-header">
 			<h1>Turn your to-do list into a game</h1>
 		</div>
-		<img class="text-center" src="http://placehold.it/800x300" /><!--insert intro images-->
+		<img class="text-center" src="images/intro.jpg" /><!--insert intro images-->
 		<div class="introcall">
 			<h3>Join 150,000 players making it fun to get things done!
 			<small><button class="btn btn-primary gamifybutton">Gamify your life, for free</button></small>
@@ -96,7 +96,7 @@
 		<h3>Join us on a mini-quest!</h3><h4><span class="glyphicon glyphicon-chevron-down"></span></h4>
 
 		<!--Avatar fades in from behind, is affixed to travel at the center of the page all the way down until it hits the footer call-to-action-->
-		<img id="myAvatar" data-spy="affix" data-offset-top="400" data-offset-bottom="200" src="http://placehold.it/150x150" />
+		<img id="myAvatar" data-spy="affix" data-offset-top="380" data-offset-bottom="400" src="http://placehold.it/150x150" />
 		
 	</section>
 
@@ -539,14 +539,6 @@ $(document).ready( function() {
 	});
 });
 </script>
-<script type="text/javascript">
+
-$('#myAvatar').affix({
-  offset: {
-    top: 400,
-    bottom: function () {
-      return (this.bottom = $('.footer').outerHeight(true))
-    }
-  }
-})</script>
 </body>
 </html>

style.css

@@ -43,16 +43,34 @@ h1, h2, h3, h4, p.sectioninfo {
   max-width:400px;
 }
 
-img#myAvatar.affix-top {
+img#myAvatar {
   margin-left:50%;
   left:-75px;
 }
 
+img#myAvatar.affix-top {
+  position: absolute;
+  top: 750px;
+}
+
+img#myAvatar.affix-bottom {
+  position:absolute;
+  bottom:500px;
+}
+
+img#myAvatar.affix {
+  top: 400px;
+}
+
 button.gamifybutton {
   margin: 20px;
   width:20%;
 }
 
+#rewards {
+  margin-top:200px;
+}
+
 .tweet.popover {
   position:relative;
   display:block;