Skip to content

Instantly share code, notes, and snippets.

@4lun 4lun/index.html
Created Sep 17, 2019

Embed
What would you like to do?
<html>
<head>
<title>~alun</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
box-sizing: border-box;
margin: 0;
padding: 2vh 5vh 4vh;
background: #050505;
color: #fff;
font-family: monospace;
font-size: 14px;
line-height: 1.4;
overflow: hidden;
position: fixed;
height: 100vh;
width: 100vw;
border-top: 2vh solid #222;
}
h1, h2, h3, h4, h5, h6 {
color: #ccc;
line-height: 1.3;
margin: 0 0 15px;
padding: 0;
}
h1 {
font-weight: 400;
font-size: 48px;
}
h1:before,
h1:after {
content: attr(data-x);
position: absolute;
top: 0vh;
left: -25vh;
font-size: 150vh;
letter-spacing: -35vh;
line-height: 1;
color: inherit;
opacity: 0.1;
}
h1:after {
top: -50vh;
left: -60vh;
filter: invert(1);
}
p {
font-size: 16px;
margin: 0 0 15px;
padding: 0;
}
</style>
</head>
<body>
<h1 data-x="//">~alun</h1>
<p>smile. be better. distraction is the enemy.</p>
<script>
var randomRGBValue = function(min, max) {
min = min || 0;
max = max || 255;
return Math.round(Math.max(min, Math.min(max, Math.random() * 255)));
};
var cycleColor = function(elem) {
elem.style.color = "rgb(" + randomRGBValue() + "," + randomRGBValue() + "," + randomRGBValue() + ")";
};
var h1Elem = document.querySelector('h1');
var cycle = null;
var xChars = ["/", "#", "-", "!", "0", "$", "%", "A", "L", "U", "N"];
var randomXChar = function() {
return xChars[Math.floor(Math.random() * xChars.length)];
}
function move() {
cycleColor(h1Elem);
h1Elem.dataset.x = randomXChar() + "" + randomXChar() + "" + randomXChar() + "" + randomXChar() + "" + randomXChar() + "" + randomXChar();
}
function start() {
if (cycle !== null) return;
cycle = setInterval(move, 50);
}
function stop() {
clearInterval(cycle);
cycle = null;
}
h1Elem.addEventListener('click', function() {
(cycle === null) ? start() : stop()
});
var timeout = null;
var listener = function() {
clearTimeout(timeout);
start();
timeout = setTimeout(function() {
stop();
}, 150);
};
window.addEventListener('mousemove', listener);
window.addEventListener('touchmove', listener);
start();
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1272815-12"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-1272815-12');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.