Finish scene 2

andrewbranch · andrewbranch · commit 34dafb651779 · 2013-10-25T23:34:00.000-05:00
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <script src="javascripts/skrollr.menu.min.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
 </head>
-<body id="top">
+<body>
     <nav>
         <div>
             <a href="#top" id="mini-logo" data-menu-top="0">
@@ -47,6 +47,13 @@ <h1 class="huge">What is Switcha<span class="blue">BLE</span>?</h1>
             <div class="clock-minute"></div>
             <div class="clock-hour"></div>
         </div>
+        <p id="switchable-is">
+<!--            Switcha<span class="blue">BLE</span> is a<span id="n">n</span>-->
+            <span id="alarm-clock">alarm clock</span>
+            <span id="app">app</span>
+            <span id="device">device</span>
+            <span id="design-project">design project</span>
+        </p>
     </section>
     
     <script src="javascripts/skrollr.stylesheets.min.js"></script>
diff --git a/stylesheets/main.less b/stylesheets/main.less
@@ -13,7 +13,7 @@
 
 body {
     padding-top: @nav-height;
-    font: 400 ~"12px/1.4" 'Gudea';
+    font: 400 ~"12px/1.4" 'Open Sans';
     @media (min-width: @screen-sm) { font-size: 16px; }
     @media (min-width: @screen-md) { font-size: 18px; }
     @media (min-width: @screen-sm) { font-size: 20px; }
@@ -216,7 +216,7 @@ header {
 
 #scene2 {
     top: 0%;
-    background-color: @blue;
+    background-color: #444;
     #clock {
         position: absolute;
         top: 50%;
@@ -231,4 +231,19 @@ header {
             background-color: white;
         }
     }
+    #switchable-is {
+//        width: 14em;
+//        margin-left: -7em;
+//        left: 50%;
+        width: 100%;
+        text-align: center;
+        font-size: 3em;
+        color: @gray;
+        position: absolute;
+        top: 60%;
+        span {
+            color: white;
+            display: none;
+        }
+    }
 }
diff --git a/stylesheets/skrollr.css b/stylesheets/skrollr.css
@@ -1,4 +1,8 @@
 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; }
+nav a[href='#docs'] { -skrollr-animation-name: nav-docs; }
 #mini-logo { -skrollr-animation-name: mini-logo; }
 header { -skrollr-animation-name: header; }
 #lightbulb { -skrollr-animation-name: lightbulb; }
@@ -10,6 +14,12 @@ header { -skrollr-animation-name: header; }
 #clock { -skrollr-animation-name: clock; }
 #clock .clock-hour { -skrollr-animation-name: clock-hour; }
 #clock .clock-minute { -skrollr-animation-name: clock-minute; }
+#switchable-is { -skrollr-animation-name: switchable-is; }
+#alarm-clock { -skrollr-animation-name: alarm-clock; }
+#app { -skrollr-animation-name: app; }
+#device { -skrollr-animation-name: device; }
+#design-project { -skrollr-animation-name: design-project; }
+
 
 @-skrollr-keyframes nav {
     0 {
@@ -20,6 +30,21 @@ header { -skrollr-animation-name: header; }
     }
 }
 
+@-skrollr-keyframes nav-about {
+    0 {
+        color[begin]: rgb(170, 170, 170);
+        //border-bottom-width[begin]: 0px;
+    }
+    1000 {
+        color[begin]: rgb(101, 151, 207);
+        //border-bottom-width[begin]: 1px;
+    }
+    5500 {
+        color[begin]: rgb(170, 170, 170);
+        //border-bottom-width[end]: 0px;
+    }
+}
+
 @-skrollr-keyframes mini-logo {
     0 {
         width: 0em;
@@ -138,10 +163,40 @@ header { -skrollr-animation-name: header; }
 }
 
 @-skrollr-keyframes clock-minute {
-    2600 {
-        transform: rotate(90deg);
-    }
-    5500 {
-        transform: rotate(1170deg);
+    2600 { transform: rotate(90deg); }
+    5500 { transform: rotate(1170deg); }
+}
+
+@-skrollr-keyframes switchable-is {
+    2500 { top[cubic]: 60%; }
+    5500 { top[cubic]: 80%; }
+    
+}
+
+@-skrollr-keyframes alarm-clock {
+    0 { display: inline; }
+    3500 { display: none; }
+}
+
+@-skrollr-keyframes app {
+    2500 { display: none; }
+    3500 { display: inline; }
+    4000 { display: none; }
+}
+
+@-skrollr-keyframes device {
+    2500 { display: none; }
+    4000 { display: inline; }
+    4500 { display: none; }
+}
+
+@-skrollr-keyframes design-project {
+    2500 { display: none; }
+    4500 {
+        display: inline;
+        color: white;
+    }
+    5000 {
+        color: !#87b9ef;
     }
 }
