Skip to content
Permalink
Browse files

Add KevK.dev animation

  • Loading branch information...
kevinknoll committed Mar 21, 2019
1 parent 71cf93d commit 9815f267b7b85cc0212328210d9b422342d62857
Showing with 69 additions and 6 deletions.
  1. +5 −2 web/_includes/home.html
  2. +1 −1 web/_includes/interior.html
  3. +62 −0 web/css/home.css
  4. +1 −3 web/css/style.css
@@ -1,10 +1,13 @@
---
layout: layout.html
---
<div class="hdr">
<link rel="stylesheet" href="/css/home.css">
<div class="hdr big">
<div class="wrap">
<h1>
<span>My name is Kevin Knoll</span> and I develop the web.
<span class="fade">My name is</span>
<span class="name"><span class="down">Kev<span class="crush">in </span>K<span class="crush">noll</span></span></span>
<span class="fade">and I</span> <span class="right">dev<span class="crush wait">elop</span></span> <span class="fade">the web.</span>
</h1>
</div>
</div>
@@ -4,7 +4,7 @@
<div class="hdr">
<div class="wrap">
<a href="/">
Kevin Knoll
KevK.dev
</a>
</div>
</div>
@@ -0,0 +1,62 @@
.hdr .wrap {
display: flex;
flex-direction: column;
font-size: 25px;
font-weight: bold;
height: 55vh;
justify-content: space-between;
width: 100%;
}
.hdr .name {
display: block;
font-size: 45px;
transition: 0.2s ease-in all;
}
.hdr h1:hover .name {
font-size: inherit;
}
.hdr h1:hover .name {
animation: movedown 0.5s ease 1s 1 normal forwards;
}
.hdr h1:hover .fade {
animation: crush 0.5s ease 0s 1 normal forwards;
}
.hdr h1:hover .crush {
animation: crush 0.5s ease 0.5s 1 normal forwards;
display: inline-block;
}
.hdr h1:hover .crush.wait {
animation-delay: 1.5s;
}
.hdr h1:hover .right {
animation: moveright 0.3s ease 1s 1 normal forwards;
display: inline-block;
position: relative;
}
.hdr h1:hover .right:before {
animation: fadein 0.5s ease 1s 1 normal forwards;
content: '.';
left: -0.25em;
opacity: 0;
position: absolute;
top: 0;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes crush {
from { max-width: 100em; }
to { max-width: 0; opacity: 0; }
}
@keyframes moveright {
to { transform: translateX(0.2em); }
}
@keyframes movedown {
to { transform: translateY(1.25em); }
}
@@ -22,9 +22,6 @@ html, body, .page {
background: #1fb2b2;
color: #272727;
}
.hdr span {
display: block;
}
.hdr a {
background-image: linear-gradient(#272727, #272727);
background-position: left bottom -2px;
@@ -75,3 +72,4 @@ a:hover {
overflow: visible;
width: auto;
}

0 comments on commit 9815f26

Please sign in to comment.
You can’t perform that action at this time.