189 lines
5.2 KiB
HTML
189 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>windy</title>
|
|
|
|
<header>
|
|
<h1>windy</h1>
|
|
<h2><a href="index.html">return</a></h2>
|
|
</header>
|
|
<main>
|
|
<div class="line line-out" id="l1">
|
|
<span class="word w1">it's</span>
|
|
<span class="word w2">windy</span>
|
|
<span class="word w3">today</span>
|
|
<span class="word w4">and</span>
|
|
</div>
|
|
<div class="line line-out" id="l2">
|
|
<span class="word w1">there's</span>
|
|
<span class="word w2">nothing</span>
|
|
<span class="word w3">going</span>
|
|
<span class="word w4">on</span>
|
|
<span class="word w5">but</span>
|
|
</div>
|
|
<div class="line line-out" id="l3">
|
|
<span class="word w1">the</span>
|
|
<span class="word w2">wind</span>
|
|
<span class="word w3">that</span>
|
|
<span class="word w4">rattles</span>
|
|
<span class="word w5">our</span>
|
|
<span class="word w6">bones</span>
|
|
<span class="word w7">and</span>
|
|
<span class="word w8">shakes</span>
|
|
<span class="word w9">us</span>
|
|
<span class="word w10">down</span>
|
|
<span class="word w11">the</span>
|
|
<span class="word w12">street</span>
|
|
</div>
|
|
<div class="line line-out" id="l4">
|
|
<span class="word w1">there's</span>
|
|
<span class="word w2">nothing</span>
|
|
<span class="word w3">we</span>
|
|
<span class="word w4">should</span>
|
|
<span class="word w5">be</span>
|
|
<span class="word w6">doing</span>
|
|
</div>
|
|
<div class="line line-out" id="l5">
|
|
<span class="word w1">but</span>
|
|
<span class="word w2">cleaning</span>
|
|
<span class="word w3">and</span>
|
|
<span class="word w4">the</span>
|
|
<span class="word w5">wind</span>
|
|
<span class="word w6">blows</span>
|
|
<span class="word w7">the</span>
|
|
<span class="word w8">dust</span>
|
|
</div>
|
|
<div class="line line-out" id="l6">
|
|
<span class="word w1">all</span>
|
|
<span class="word w2">over</span>
|
|
<span class="word w3">everything</span>
|
|
</div>
|
|
<div class="line line-out" id="l7">
|
|
<span class="word w1">so</span>
|
|
<span class="word w2">here</span>
|
|
<span class="word w3">here</span>
|
|
<span class="word w4">to</span>
|
|
<span class="word w5">the</span>
|
|
<span class="word w6">wind</span>
|
|
</div>
|
|
<div class="line line-out" id="l8">
|
|
<span class="word w1">and</span>
|
|
<span class="word w2">here</span>
|
|
<span class="word w3">here</span>
|
|
<span class="word w4">to</span>
|
|
<span class="word w5">it</span>
|
|
<span class="word w6">blowing</span>
|
|
<span class="word w7">everything</span>
|
|
<span class="word w8">everywhere</span>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
max-width: 30em;
|
|
padding: 1em;
|
|
margin: auto;
|
|
position: relative;
|
|
}
|
|
body {
|
|
font: 36px/0.8 sans-serif;
|
|
background: fixed linear-gradient(34deg, #243fed 10%,20%,#f98a5c 50%,#898921);
|
|
color: white;
|
|
}
|
|
.line {
|
|
line-height: 0;
|
|
position: relative;
|
|
left: 0;
|
|
transition-property: line-height, left;
|
|
transition-duration: 2s, 1s;
|
|
}
|
|
.line-out {
|
|
line-height: 1.8;
|
|
transition-property: line-height;
|
|
transition-duration: 2s;
|
|
}
|
|
.word {
|
|
position: relative;
|
|
left: 0;
|
|
}
|
|
.word-blow-left {
|
|
left: -100em;
|
|
transition-property: left;
|
|
transition-duration: 1s;
|
|
}
|
|
.word-blow-right {
|
|
left: 100em;
|
|
transition-property: left;
|
|
transition-duration: 1s;
|
|
}
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
font-size: 18px;
|
|
font-style: italic;
|
|
}
|
|
a:link {
|
|
font-size: inherit;
|
|
transition: font-size 0.4s;
|
|
color: inherit;
|
|
}
|
|
a:visited { color: inherit; }
|
|
a:hover {
|
|
font-size: 48px;
|
|
transition: font-size 0.4s;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function hasClass(el, className) {
|
|
if (el.classList)
|
|
return el.classList.contains(className)
|
|
else
|
|
return
|
|
!!el.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'))
|
|
}
|
|
function addClass(el, className) {
|
|
if (el.classList) { el.classList.add(className); }
|
|
else if (!hasClass(el, className)) { el.className += " " + className; }
|
|
}
|
|
function removeClass(el, className) {
|
|
if (el.classList) { el.classList.remove(className); }
|
|
else if (hasClass(el, className)) {
|
|
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
|
|
el.className = el.className.replace(reg, ' ');
|
|
}
|
|
}
|
|
|
|
function updateTransition() {
|
|
var els = document.querySelectorAll(".line");
|
|
for (let i = 0; i < els.length; i++) {
|
|
let el = els[i]
|
|
setTimeout(function() {
|
|
removeClass(el, 'line-out');
|
|
}, (2500+8000*i*Math.random()));
|
|
setTimeout(function() {
|
|
addClass(el, 'line-out');
|
|
}, (6000+8000*i*Math.random()));
|
|
}
|
|
var words = document.querySelectorAll(".word");
|
|
for (let w = 0; w < words.length; w++) {
|
|
let el = words[w]
|
|
el.setAttribute("style", "text-shadow: 0 0 "
|
|
+(Math.random()*10)+"px rgba("
|
|
+(Math.random()*255)+","
|
|
+(Math.random()*255)+","
|
|
+(Math.random()*255)+","
|
|
+(Math.random())+");")
|
|
el.addEventListener("mouseover", function() {
|
|
let blow_class
|
|
= Math.random() > 0.5 ? 'word-blow-left' : 'word-blow-right';
|
|
addClass(el,blow_class);
|
|
setTimeout(function() {
|
|
removeClass(el,blow_class);
|
|
}, 1500);
|
|
});
|
|
}
|
|
}
|
|
var intervalID = window.setInterval(updateTransition, 2000);
|
|
</script>
|