CSS Animations

2017-04-13 10:08:00 -07:00 · 2017-04-13 10:08:00 -07:00 · 713d332f03
commit 713d332f03
parent 03fcaba1d6
5 changed files with 205 additions and 10 deletions
--- a/css/style.css
+++ b/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; } }
--- a/index.html
+++ b/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>

--- a/sass/animations.scss
+++ b/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));
+//     }
+// }
--- a/sass/responsive.scss
+++ b/sass/responsive.scss
@ -1,5 +1,5 @@
@mixin respond-to($breakpoint) {
-    @media (max-width: $width) {
+    @media (max-width: $breakpoint) {
        @content;
    }
 }
--- a/sass/style.scss
+++ b/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;