<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Teach a Design Concept</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0 10%;
background: #eae9e6;
}
lesson {
font-size: 25px;
text-align: justify;
}
.r {
color: #e2204c;
}
.b {
color: #3a58cc;
}
.g {
color: #7bbf4a;
}
.o {
color: #e49d2f;
}
.p {
color: #b674e6;
}
.lg {
font-size: 1.25em;
}
.sm {
font-size: 0.75em;
}
.b {
font-weight: bold;
}
.i {
font-style: italic;
}
.u {
text-decoration: underline;
}
.t {
text-transform: uppercase;
}
.s1::selection {
background: #dee220;
}
.s2::selection {
background: #20f79f;
}
.s3::selection {
background: #e065bf;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body translate="no">
<lesson>The most important principle of good design is consistency. This concept is often overlooked and even ignored completely when working on a team. The designer thinks that their way is the best way, the developer thinks the designers way is too difficult to implement, and the business just wants it done as quickly as possible.</lesson>
<script src='https://codepen.io/banik/pen/ReNNrO/3f837b2f0085b5125112fc455941ea94.js'></script>
<script id="rendered-js" >
let doc = document,html = doc.querySelector('html'),debounce = false;
let classList = ['lg', 'sm', 'b', 'i', 'u', 't', 'r', 'b', 'g', 'o', 'p'];
let fontList = ['Nunito', 'Anton', 'Cabin', 'Lobster', 'Arvo', 'Pacifico', 'Shadows Into Light', 'Bree Serif', 'Asap', 'Abril Fatface', 'Acme', 'Permanent Marker', 'Rokkitt', 'Righteous', 'Cinzel', 'Domine', 'Prompt', 'Cookie', 'Assistant', 'Fredoka One', 'Monoton', 'Russo One', 'Caveat', 'Merienda'];
let init = () => {
let words = doc.querySelector('lesson').innerText.split(' '),out = '';
words.forEach(word => out += `<span>${word}</span> `);
doc.querySelector('lesson').innerHTML = out;
let link = doc.createElement('link');
link.href = 'https://fonts.googleapis.com/css?family=';
link.href += fontList.join('|').replace().replace(/ /g, '+');
link.type = "text/css";link.rel = "stylesheet";
doc.querySelector('head').appendChild(link);
restyle();
html.addEventListener('mousemove', restyle);
};
let restyle = () => {
if (!debounce) {
debounce = true;
let words = doc.querySelectorAll('lesson span');
words.forEach(word => {
word.setAttribute('style', `font-family: ${fontList[~~(Math.random() * fontList.length)]}`);
word.className = '';
word.classList.add(classList[~~(Math.random() * classList.length)]);
word.classList.add(`s${~~(Math.random() * 3 + 1)}`);
});
setTimeout(() => debounce = false, 200);
}
};
init();
</script>
</body>
</html>
Comments
Post a Comment