Parallax candy!

app/stylesheets/base.sass

@@ -71,11 +71,24 @@ body
       a
         padding-left: 22px
         background: url("/images/icon-browser.png") no-repeat
-  #crowd-header
+  #crowd-header-viewport
+    position: relative
+    overflow: hidden
     margin: 0 auto
-    width: 1075px
-    height: 144px
-    background: url("/images/crowd-header.png") center no-repeat
+    width: 1070px
+    height: 140px
+    #crowd-header, #crowd-header2
+      position: absolute
+    #crowd-header
+      width: 1075px
+      height: 144px
+      background: url("/images/crowd-header.png") center no-repeat
+      z-index: 3
+    #crowd-header2
+      width: 1100px
+      height: 160px
+      background: url("/images/crowd-header2.png") center no-repeat
+      z-index: 2
 
 #hero
   h2
@@ -200,7 +213,7 @@ body
 
 #footer
   text-align: center
-  background: url("/images/bg-footer-gradient.jpg") top repeat-x
+  background: url("/images/bg-footer-gradient.jpg") bottom repeat-x
   #footer-logo
     margin: 0 auto 15px auto
     width: 20px
@@ -211,11 +224,25 @@ body
     padding-bottom: 5px
     &#copyright
       font-size: 14px
-  #crowd-footer
-    width: 1000px
-    height: 114px
+  #crowd-footer-viewport
+    position: relative
+    overflow: hidden
+    width: 1090px
+    height: 116px
     margin-top: 20px
-    background: url("/images/crowd-footer.png") center no-repeat
+    margin-left: -50px
+    #crowd-footer, #crowd-footer2
+      position: absolute
+    #crowd-footer
+      width: 1100px
+      height: 120px
+      background: url("/images/crowd-footer.png") center no-repeat
+      z-index: 3
+    #crowd-footer2
+      width: 1110px
+      height: 125px
+      background: url("/images/crowd-footer2.png") center no-repeat
+      z-index: 2
 
 /*------------------------------
  *  portrait slider

app/views/layouts/application.html.slim

@@ -5,7 +5,7 @@ html
     link rel="canonical" href="http://rubycommitters.org/"
     == favicon_tag 'favicon.png'
     == stylesheet_link_tag :base
-    == javascript_include_tag :jquery, :'jquery.nivo.slider.pack', :application
+    == javascript_include_tag :jquery, :'jquery.nivo.slider.pack', :'jquery.jparallax.min.js', :application
 
   body
     #ribbon== link_to 'Fork me on GitHub', 'https://github.com/fredwu/rubycommitters.org'
@@ -15,7 +15,9 @@ html
           #header
             h1#logo= @site_name
             p#ruby-link== link_to 'Visit the official Ruby website', 'http://www.ruby-lang.org/'
-        #crowd-header
+        #crowd-header-viewport
+          #crowd-header
+          #crowd-header2
       #crowd-header-strip
       #hero
         #inner-wrapper
@@ -33,7 +35,8 @@ html
             == "An initiative by #{link_to 'Aaron Patterson', 'http://tenderlovemaking.com/'}"
             == " | Website programmed and designed by #{link_to 'Fred Wu', 'http://fredwu.me/'}"
           p== "Powered by #{link_to 'Padrino', 'http://www.padrinorb.com/'}, #{link_to 'Slim', 'https://github.com/stonean/slim'} and #{link_to 'Sass', 'http://sass-lang.com/'}"
-          #crowd-footer
-          == partial 'layouts/google_analytics' if Padrino.env == :production
-
-      #crowd-footer-strip
+          #crowd-footer-viewport
+            #crowd-footer
+            #crowd-footer2
+        #crowd-footer-strip
+    == partial 'layouts/google_analytics' if Padrino.env == :production

public/javascripts/application.js

@@ -1,4 +1,13 @@
 $(function() {
+  $("#crowd-header, #crowd-header2").parallax({
+    mouseport: $("#crowd-header-viewport"),
+    decay: 0
+  });
+  $("#crowd-footer, #crowd-footer2").parallax({
+    mouseport: $("#crowd-footer-viewport"),
+    decay: 0
+  });
+
   $("ul.social li a, ul.bio-langs li a").hover(function() {
     $(this).fadeTo(100, 1);
   }, function() {

public/stylesheets/base.css

@@ -108,11 +108,24 @@ body {
       #header-wrapper #header p#ruby-link a {
         padding-left: 22px;
         background: url("/images/icon-browser.png") no-repeat; }
-  #header-wrapper #crowd-header {
+  #header-wrapper #crowd-header-viewport {
+    position: relative;
+    overflow: hidden;
     margin: 0 auto;
-    width: 1075px;
-    height: 144px;
-    background: url("/images/crowd-header.png") center no-repeat; }
+    width: 1070px;
+    height: 140px; }
+    #header-wrapper #crowd-header-viewport #crowd-header, #header-wrapper #crowd-header-viewport #crowd-header2 {
+      position: absolute; }
+    #header-wrapper #crowd-header-viewport #crowd-header {
+      width: 1075px;
+      height: 144px;
+      background: url("/images/crowd-header.png") center no-repeat;
+      z-index: 3; }
+    #header-wrapper #crowd-header-viewport #crowd-header2 {
+      width: 1100px;
+      height: 160px;
+      background: url("/images/crowd-header2.png") center no-repeat;
+      z-index: 2; }
 
 #hero {
   background: #392a2a; }
@@ -232,7 +245,7 @@ body {
 
 #footer {
   text-align: center;
-  background: url("/images/bg-footer-gradient.jpg") top repeat-x; }
+  background: url("/images/bg-footer-gradient.jpg") bottom repeat-x; }
   #footer #footer-logo {
     margin: 0 auto 15px auto;
     width: 20px;
@@ -243,11 +256,25 @@ body {
     padding-bottom: 5px; }
     #footer p#copyright {
       font-size: 14px; }
-  #footer #crowd-footer {
-    width: 1000px;
-    height: 114px;
+  #footer #crowd-footer-viewport {
+    position: relative;
+    overflow: hidden;
+    width: 1090px;
+    height: 116px;
     margin-top: 20px;
-    background: url("/images/crowd-footer.png") center no-repeat; }
+    margin-left: -50px; }
+    #footer #crowd-footer-viewport #crowd-footer, #footer #crowd-footer-viewport #crowd-footer2 {
+      position: absolute; }
+    #footer #crowd-footer-viewport #crowd-footer {
+      width: 1100px;
+      height: 120px;
+      background: url("/images/crowd-footer.png") center no-repeat;
+      z-index: 3; }
+    #footer #crowd-footer-viewport #crowd-footer2 {
+      width: 1110px;
+      height: 125px;
+      background: url("/images/crowd-footer2.png") center no-repeat;
+      z-index: 2; }
 
 /*------------------------------
  *  portrait slider