End of Video 2 - Parallax Header

DevTips · Apr 3, 2015 · dd04ee1 · dd04ee1
1 parent 1b79e90
commit dd04ee1
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 2 deletions.
diff --git a/css/layout1.sass b/css/layout1.sass
@@ -23,3 +23,47 @@ img
 
 
 // Parallax
+
+.bird-box
+  position: relative
+  height: 600px
+  background:
+    image: url(/images/bird-bg.jpg)
+    size: auto 600px
+    position: top center
+    attachment: fixed
+  overflow: hidden
+
+.logo
+  height: 100px
+  width: 100%
+  background:
+    image: url(/images/black-bird-logo.svg)
+    position: center
+    repeat: no-repeat
+  position: absolute
+  top: 50%
+  margin-top: -50px
+
+.fore-bird
+  width: 960px
+  height: 733px
+  background:
+    image: url(/images/fore-bird.png)
+    repeat: no-repeat
+    position: right bottom
+  position: absolute
+  left: 50%
+  margin-left: -480px
+  top: 380px
+
+.back-bird
+  width: 960px
+  height: 298px
+  background:
+    image: url(/images/back-bird.png)
+    repeat: no-repeat
+    position: top left
+  position: absolute
+  left: 50%
+  margin-left: -480px
diff --git a/css/style.css b/css/style.css
@@ -874,3 +874,43 @@ figure {
 
 img {
   max-width: 100%; }
+
+.bird-box {
+  position: relative;
+  height: 600px;
+  background-image: url(/images/bird-bg.jpg);
+  background-size: auto 600px;
+  background-position: top center;
+  background-attachment: fixed;
+  overflow: hidden; }
+
+.logo {
+  height: 100px;
+  width: 100%;
+  background-image: url(/images/black-bird-logo.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 50%;
+  margin-top: -50px; }
+
+.fore-bird {
+  width: 960px;
+  height: 733px;
+  background-image: url(/images/fore-bird.png);
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  position: absolute;
+  left: 50%;
+  margin-left: -480px;
+  top: 380px; }
+
+.back-bird {
+  width: 960px;
+  height: 298px;
+  background-image: url(/images/back-bird.png);
+  background-repeat: no-repeat;
+  background-position: top left;
+  position: absolute;
+  left: 50%;
+  margin-left: -480px; }
diff --git a/index.html b/index.html
@@ -10,6 +10,11 @@
     <link rel="icon" type="image/png" href="images/favicon.png">
   </head>
   <body>
+    <header class="bird-box">
+      <div class="back-bird"></div>
+      <div class="logo"></div>
+      <div class="fore-bird"></div>
+    </header>
     <section class="content">
       <article>
         <h1>Clothing Store</h1>

diff --git a/index.jade b/index.jade
@@ -10,9 +10,13 @@ html(lang="en")
     link(rel="icon", type="image/png", href="images/favicon.png")
 
   body
+
+    header.bird-box
+      .back-bird
+      .logo
+      .fore-bird
 
-
-
+
     section.content
 
       article

diff --git a/js/functions.js b/js/functions.js
@@ -0,0 +1,17 @@
+$(window).scroll(function(){
+
+  var wScroll = $(this).scrollTop();
+
+  $('.logo').css({
+    'transform' : 'translate(0px, '+ wScroll /2 +'%)'
+  });
+
+  $('.back-bird').css({
+    'transform' : 'translate(0px, '+ wScroll /4 +'%)'
+  });
+
+  $('.fore-bird').css({
+    'transform' : 'translate(0px, -'+ wScroll /40 +'%)'
+  });
+
+});
diff --git a/js/min/functions-min.js b/js/min/functions-min.js
@@ -0,0 +1,19 @@
+$(window).scroll(function(){
+
+  var wScroll = $(this).scrollTop();
+
+  $('.logo').css({
+    'transform' : 'translate(0px, '+ wScroll /2 +'%)'
+  });
+
+  $('.back-bird').css({
+    'transform' : 'translate(0px, '+ wScroll /4 +'%)'
+  });
+
+  $('.fore-bird').css({
+    'transform' : 'translate(0px, -'+ wScroll /40 +'%)'
+  });
+
+});
+
+