Scaffold team section

Author: andrewbranch

images/andrew.jpg

@@ -305,7 +305,27 @@ <h1 class="huge">What is Switcha<span class="blue">BLE</span>?</h1>
         </div>
     </section>
 
-    <section id="scene4">    
+    <section id="scene4">
+        <div id="pic-container">
+            <div id="pic-esteban"></div>
+            <div id="pic-brett"></div>
+            <div id="pic-derek"></div>
+            <div id="pic-andrew"></div>
+        </div>
+        <div id="bio-container">
+            <div id="bio-andrew">
+                <h2>Andrew Branch</h2>
+            </div>
+            <div id="bio-derek">
+                <h2>Derek Albritton</h2>
+            </div>
+            <div id="bio-brett">
+                <h2>Brett Byer</h2>
+            </div>
+            <div id="bio-esteban">
+                <h2>Esteban Porres</h2>
+            </div>
+        </div>
     </section>
 
     <script src="javascripts/skrollr.stylesheets.min.js"></script>

images/brett.jpg

@@ -318,5 +318,37 @@ header {
 }
 
 #scene4 {
-    background-color: @blue;
+    
+    #pic-container {
+        font-size: 0;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        white-space: nowrap;
+        & > div {
+            display: inline-block;
+            width: 110%;
+            height: 100%;
+            background-size: cover;
+        }
+        #pic-esteban { background-image: url('../images/esteban.jpg'); }
+        #pic-brett { background-image: url('../images/brett.jpg'); }
+        #pic-derek { background-image: url('../images/derek.jpg'); }
+        #pic-andrew { background-image: url('../images/andrew.jpg'); }
+    }
+    #bio-container {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        height: 10em;
+        max-height: 50%;
+        background-color: rgba(255, 255, 255, 0.7);
+        border-top: 1px solid white;
+        box-shadow: 0 0 10px black;
+        white-space: nowrap;
+        & > div {
+            display: inline-block;
+            width: 110%;
+        }
+    }
 }

images/derek.jpg

@@ -42,11 +42,21 @@ header { -skrollr-animation-name: header; }
 #phone-column { -skrollr-animation-name: phone-column; }
 
 #scene4 { -skrollr-animation-name: scene4; }
+#bio-container > div { -skrollr-animation-name: bios; }
+#pic-container > div { -skrollr-animation-name: pics; }
 
 
 @-skrollr-keyframes nav {
-    20000 { background-color: rgba(255, 255, 255, 0); }
-    
+    29000 {
+        background-color: rgba(255, 255, 255, 0);
+        border-bottom: 0px solid rgba(255, 255, 255, 0);
+        box-shadow: 0 0 0px rgba(0, 0, 0, 0);
+    }
+    30000 {
+        background-color: rgba(255, 255, 255, 0.9);
+        border-bottom: 1px solid rgba(255, 255, 255, 1);
+        box-shadow: 0 0 10px rgba(0, 0, 0, 1);
+    }
 }
 
 @-skrollr-keyframes nav-about {
@@ -371,5 +381,30 @@ header { -skrollr-animation-name: header; }
 }
 
 @-skrollr-keyframes scene4 {
-    21499 { display: none; }
+    29000 { transform: translate3d(0, 100%, 0); }
+    30000 { transform: translate3d(0, 0%, 0); }
+}
+
+@-skrollr-keyframes pics {
+    30000 { transform: translate3d(0%, 0, 0); }
+    32500 { transform: translate3d(-10%, 0, 0); }
+    33000 { transform: translate3d(-100%, 0, 0); }
+    35500 { transform: translate3d(-110%, 0, 0); }
+    36000 { transform: translate3d(-200%, 0, 0); }
+    38500 { transform: translate3d(-210%, 0, 0); }
+    39000 { transform: translate3d(-300%, 0, 0); }
+    41500 { transform: translate3d(-310%, 0, 0); }
+    42000 { transform: translate3d(-400%, 0, 0); }
+    44500 { transform: translate3d(-410%, 0, 0); }
+}
+
+@-skrollr-keyframes bios {
+    30000 { transform: translateX(-300%); }
+    32500 { transform: translateX(-290%); }
+    33000 { transform: translateX(-200%); }
+    35500 { transform: translateX(-190%); }
+    36000 { transform: translateX(-100%); }
+    38500 { transform: translateX(-90%); }
+    39000 { transform: translateX(0%); }
+    41500 { transform: translateX(10%); }
 }