CSS Animations

css/style.css

@@ -1,3 +1,119 @@
+@-webkit-keyframes fadeIn {
+  0% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  20% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  100% {
+    -moz-opacity: 1;
+    -webkit-opacity: 1;
+    -o-opacity: 1;
+    opacity: 1;
+    -moz-transform: none;
+    -webkit-transform: none;
+    -o-transform: none;
+    transform: none; } }
+
+@-moz-keyframes fadeIn {
+  0% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  20% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  100% {
+    -moz-opacity: 1;
+    -webkit-opacity: 1;
+    -o-opacity: 1;
+    opacity: 1;
+    -moz-transform: none;
+    -webkit-transform: none;
+    -o-transform: none;
+    transform: none; } }
+
+@-o-keyframes fadeIn {
+  0% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  20% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  100% {
+    -moz-opacity: 1;
+    -webkit-opacity: 1;
+    -o-opacity: 1;
+    opacity: 1;
+    -moz-transform: none;
+    -webkit-transform: none;
+    -o-transform: none;
+    transform: none; } }
+
+@keyframes fadeIn {
+  0% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  20% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  100% {
+    -moz-opacity: 1;
+    -webkit-opacity: 1;
+    -o-opacity: 1;
+    opacity: 1;
+    -moz-transform: none;
+    -webkit-transform: none;
+    -o-transform: none;
+    transform: none; } }
+
 .reset, body, .slide, .slide div .project .details h2, .slide div .project .details p, .slide div .project .details .award div p {
   padding: 0;
   margin: 0;
@@ -195,6 +311,12 @@ body {
   font-style: italic;
   font-weight: normal; }
 
+#scrollprompt {
+  -moz-animation: 2s ease fadeIn;
+  -webkit-animation: 2s ease fadeIn;
+  -o-animation: 2s ease fadeIn;
+  animation: 2s ease fadeIn; }
+
 @media (max-width: 800px) {
   #mast {
     padding-left: 1em; } }

index.html

@@ -43,7 +43,7 @@
                             <a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
                             <a href="https://medium.com/chuckblog">Blog</a>
                         </p>
-                        <p>Scroll down!</p>
+                        <p id="scrollprompt">Scroll down!</p>
                     </div>
                 </div>
             </div>
@@ -52,7 +52,7 @@
     <div id="spaceTakerUpper">
     </div>
     <div class="slide" style="margin-top:0px;">
-        <h1>About Me <span style="font-size: .5em; font-weight:normal; color: #666;">(Why I rock)</span></h1>
+        <h1>About Me <span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock</span></h1>
         <h3>A brief history of Chuck &amp; tech</h3>
         <p>When I was a child I was obsessed with trains and vacuum cleaners. In elementary school my grandma tried to teach me Photoshop. In seventh grade I started teaching myself HTML. Freshman year I started learning the basics of networking and BASH
             so I could run a Minecraft server on my sparkly new iMac. In the first half of high school I volunteered at Phoenix Children's Hospital and in the second half I taught robotics at The Waybright Academy. On top of that, I was active throughout
@@ -127,7 +127,7 @@
         </div>
     </div>
     <div class="slide">
-        <h1>Projects &amp; Experience</h1>
+        <h1>Projects &amp; Experience <span style="font-size: .5em; font-weight:normal; color: #666;">Things I've made: filter by clicking the bar above.</span></h1>
         <div class="grid" data-masonry='{ "itemSelector": ".project", "columnWidth": 400 }'>
             <div class="project">
                 <div class="cover" id="virtualKeyality">
@@ -184,9 +184,10 @@
     <script>
         var last_known_scroll = getScrollY();
         var queueing = false;
-        var t = false;
+        var t = false; //state of skill table
         var st = document.getElementById("skilltable");
         var stb = document.getElementById("skilltablebutton");
+        var sp = document.getElementById("scrollprompt");
         document.addEventListener("scroll", function() {
             last_known_scroll = getScrollY();
             sc(last_known_scroll);
@@ -224,7 +225,7 @@
                 mast.className = "large";
             }
             topDiv.style.height = topHeight + "px";
-            console.log("topheight is " + topHeight + " and topDiv.style.height = " + topDiv.style.height);
+            // console.log("topheight is " + topHeight + " and topDiv.style.height = " + topDiv.style.height);
             // mast.style.marginTop = halfHeight + "px";
 
             //background thing
@@ -236,10 +237,6 @@
 
         }
 
-        function bgColor() {
-
-        }
-
         function getScrollY() {
             //internet explorer does not have a window.scrollY property, so we need to make our own
             return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
@@ -256,6 +253,10 @@
                 t = true;
             }
         }
+
+        function prompt() {
+
+        }
     </script>
 </body>
 

sass/animations.scss

@@ -0,0 +1,66 @@
+$prefixes: ("-moz-", "-webkit-", "-o-", "");
+@mixin prefix($property, $value) {
+    @each $prefix in $prefixes {
+        #{$prefix +  $property}: $value;
+    }
+}
+
+// @mixin keyframePrefix($name) {
+//     @each $prefix in $prefixes {
+//         \@#{$prefix}keyframes #{$name} {
+//             @content;
+//         }
+//     }
+// }
+@mixin keyframePrefix($name) {
+    @-webkit-keyframes #{$name} {
+        @content;
+    }
+    @-moz-keyframes #{$name} {
+        @content;
+    }
+    @-o-keyframes #{$name} {
+        @content;
+    }
+    @keyframes #{$name} {
+        @content;
+    }
+}
+
+@include keyframePrefix(fadeIn) {
+    0% {
+        @include prefix(opacity, 0);
+        @include prefix(transform, translate(0, 10vh));
+    }
+    20% {
+        @include prefix(opacity, 0);
+        @include prefix(transform, translate(0, 10vh));
+    }
+    100% {
+        @include prefix(opacity, 1);
+        @include prefix(transform, none);
+    }
+}
+
+// @include keyframePrefix("prompt") {
+//     from,
+//     20%,
+//     53%,
+//     80%,
+//     to {
+//         @include prefix(animation-timing-function, cubic-bezier(0.215, 0.610, 0.355, 1.000));
+//         @include prefix(transform, translate(0, 0));
+//     }
+//     40%,
+//     43% {
+//         @include prefix(animation-timing-function, cubic-bezier(0.755, 0.050, 0.855, 0.060));
+//         @include prefix(transform, translate(0, -20px));
+//     }
+//     70% {
+//         @include prefix(animation-timing-function, cubic-bezier(0.755, 0.050, 0.855, 0.060));
+//         @include prefix(transform, translate(0, -10px));
+//     }
+//     90% {
+//         @include prefix(transform, translate(0, -2px));
+//     }
+// }

sass/responsive.scss

@@ -1,5 +1,5 @@
 @mixin respond-to($breakpoint) {
-    @media (max-width: $width) {
+    @media (max-width: $breakpoint) {
         @content;
     }
 }

sass/style.scss

@@ -1,5 +1,6 @@
 //setup
 @import 'responsive';
+@import 'animations';
 $width: 800px;
 $grey: #ccc;
 $pink: #ed1a76;
@@ -259,6 +260,11 @@ body {
     font-weight: normal;
 }
 
+#scrollprompt {
+    // @include prefix(animation, 1s 1.1s 1 prompt)
+    @include prefix(animation, 2s ease fadeIn)
+}
+
 @include respond-to($width) {
     #mast {
         padding-left: 1em;