Permalink
Browse files

Parallax candy!

  • Loading branch information...
1 parent 8feb14a commit 6a8ff74fed05aee397789b37234a4fc841a0a2cf @fredwu committed Jan 19, 2011
View
@@ -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
@@ -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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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() {

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -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

0 comments on commit 6a8ff74

Please sign in to comment.