Transition to scene 4

Author: andrewbranch

index.html

@@ -22,7 +22,7 @@ <h1>S</h1>
             </div>
         </a>
         <a href="#about" data-menu-top="1001">About</a>
-        <a href="#team">Team</a>
+        <a href="#team" data-menu-top="21501">Team</a>
         <a href="#photos">Photos</a>
         <a href="#documentation">Docs</a>
     </nav>
@@ -98,7 +98,7 @@ <h1 class="huge">What is Switcha<span class="blue">BLE</span>?</h1>
                     <div></div>
                 </div>
             </div>
-            <div class="col-xs-4">
+            <div class="col-xs-4" id="svgs">
                 <svg version="1.1" id="svg-device" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88.941 146.96" xml:space="preserve">
                     <g>
                         <path class="path-set-1" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" d="M15.895,60.784
@@ -208,6 +208,10 @@ <h1 class="huge">What is Switcha<span class="blue">BLE</span>?</h1>
         </div>
     </section>
 
+    <section id="scene4">
+        
+    </section>
+    
     <script src="javascripts/skrollr.stylesheets.min.js"></script>
     <script>
 

stylesheets/main.less

@@ -266,6 +266,13 @@ header {
         }
     }
 
+    #svgs {
+        -ms-transform-origin: 34% 5%;
+        -moz-transform-origin: 34% 5%;
+        -webkit-transform-origin: 7em 1em;
+        transform-origin: 34% 5%;
+    }
+    
     #svg-device {
         display: block;
         //margin-top: -8em;
@@ -309,4 +316,8 @@ header {
             &:nth-child(4) { background-color: lighten(@blue, 30%); }
         }
     }
+}
+
+#scene4 {
+    background-color: @blue;
 }

stylesheets/skrollr.css

@@ -1,3 +1,4 @@
+nav { -skrollr-animation-name: nav; }
 nav a[href='#about'] { -skrollr-animation-name: nav-about; }
 nav a[href='#team'] { -skrollr-animation-name: nav-team; }
 nav a[href='#photos'] { -skrollr-animation-name: nav-photos; }
@@ -45,16 +46,28 @@ header { -skrollr-animation-name: header; }
 #signal div:nth-child(3) { -skrollr-animation-name: signal-2; }
 #signal div:nth-child(2) { -skrollr-animation-name: signal-3; }
 #signal div:nth-child(1) { -skrollr-animation-name: signal-4; }
+#svgs { -skrollr-animation-name: svgs; }
 
+#scene4 { -skrollr-animation-name: scene4; }
 
 
+@-skrollr-keyframes nav {
+    20000 { background-color: rgba(255, 255, 255, 0); }
+    21000 { background-color: rgba(255, 255, 255, 1); }
+}
 
 @-skrollr-keyframes nav-about {
     0 { color[begin]: rgb(170, 170, 170); }
     1000 { color[begin]: rgb(101, 151, 207); }
     20000 { color[begin]: rgb(170, 170, 170); }
 }
 
+@-skrollr-keyframes nav-team {
+    0 { color[begin]: rgb(170, 170, 170); }
+    21500 { color[begin]: rgb(101, 151, 207); }
+    29000 { color[begin]: rgb(170, 170, 170); }
+}
+
 @-skrollr-keyframes mini-logo {
     0 {
         width: 0em;
@@ -384,4 +397,14 @@ header { -skrollr-animation-name: header; }
         margin-left: -100em;
         opacity: 0;
     }
+}
+
+@-skrollr-keyframes svgs {
+    19500 { transform[cubic]: scale(1); }
+    21500 { transform[cubic]: scale(200); }
+}
+
+@-skrollr-keyframes scene4 {
+    21499 { display: none; }
+    21500 { display: block; }
 }