Skip to content
Permalink
Browse files

Replace css animation on home page with lax.js

  • Loading branch information...
kevinknoll committed Mar 27, 2019
1 parent 9b43e09 commit c6c78e4e7020714bb59655632485851944868382
Showing with 48 additions and 53 deletions.
  1. +10 −2 web/_includes/home.html
  2. +9 −41 web/css/home.css
  3. +27 −10 web/js/home.js
  4. +2 −0 web/js/vendor/lax-1.2.0.min.js
@@ -6,8 +6,15 @@
<div class="wrap">
<h1>
<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>
<span class="name">
<span class="fade">Kevin </span>
<span class="fade">Knoll</span>
<span class="kev">Kev</span>
<span class="k">K</span>
</span>
<span class="fade">and I</span>
<span class="dev">dev<span class="fade">elop</span></span>
<span class="fade">the web</span><span class="end">.</span>
</h1>
</div>
</header>
@@ -16,4 +23,5 @@ <h1>
{{ content }}
</div>
</main>
<script src="/js/vendor/lax-1.2.0.min.js"></script>
<script src="/js/home.js"></script>
@@ -4,52 +4,20 @@
padding-top: 35vh;
width: 100%;
}
.hdr .name {
display: block;
transition: 0.2s ease-in all;
}
.hdr.animate .name {
animation: movedown 0.5s ease 1s 1 normal forwards;
}
.hdr.animate .fade {
animation: crush 0.5s ease 0s 1 normal forwards;
}
.hdr.animate .crush {
animation: crush 0.5s ease 0.5s 1 normal forwards;

.hdr .lax {
display: inline-block;
}
.hdr.animate .crush.wait {
animation-delay: 1.5s;
}
.hdr.animate .right {
animation: moveright 0.3s ease 1s 1 normal forwards;
display: inline-block;
.hdr .name {
display: block;
position: relative;
}
.hdr.animate .right:before {
animation: fadein 0.5s ease 1s 1 normal forwards;
content: '.';
left: -0.25em;
opacity: 0;
.hdr .kev,
.hdr .k {
position: absolute;
left: 0;
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(1em); }
.hdr .k {
left: 2.8em;
}
@@ -1,15 +1,32 @@
(function () {
var intro = document.getElementById('intro');
var kev = document.querySelector('.kev');
var k = document.querySelector('.k');
var end = document.querySelector('.end');
var dev = document.querySelector('.dev');

if (!intro || !intro.classList) {
return;
function setup(selector, attr, value) {
var els = document.querySelectorAll(selector);
for (var i = 0, ii = els.length; i < ii; ++i) {
els[i].setAttribute('data-lax-' + attr, value);
els[i].setAttribute('data-lax-anchor', '#intro');
els[i].classList.add('lax');
}
}

window.addEventListener('scroll', function (e) {
if (window.scrollY > 100) {
intro.classList.add('animate');
} else {
intro.classList.remove('animate');
}
}, false);
setup('.fade', 'opacity', '0 1, 100 0');
setup('.kev,.k', 'translate-y', '0 0, 100 50');
setup('.k', 'opacity', '0 0, 50 1');
setup('.k', 'translate-x', '0 0, 100 ' + ((kev.offsetLeft + kev.offsetWidth) - k.offsetLeft));
setup('.dev', 'translate-x', '0 0, 100 5');
setup('.end', 'translate-x', '0 0, 100 ' + (dev.offsetLeft - end.offsetLeft - 7));
setup('.end', 'translate-y', '0 0, 100 ' + (dev.offsetTop - end.offsetTop));

lax.setup();

function updateLax() {
lax.update(window.scrollY);
window.requestAnimationFrame(updateLax);
}

window.requestAnimationFrame(updateLax)
})();

Some generated files are not rendered by default. Learn more.

0 comments on commit c6c78e4

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