Falling letters tutorial css, javascript
Posted on September 22nd, 2019 in Miscellaneous by George

Vanilla js letters and words falling animation
The HTML:
<head>
<title>404 Error Page not found</title>
<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<h2 class='letters'> </h2>
<script src='index.js'></script>
</body>
The CSS:
body {
height: 800px;
width: 100%;
}
@keyframes falling {
to { top: 110vh; }
}
@keyframes rotate {
from {transform: rotate(0deg); }
to {transform: rotate(360deg); }
}
.letters span {
top: -25vw;
position: fixed;
font-family: 'Mansalva', cursive;
font-size: 60px;
animation-direction: alternate;
animation:
falling 10s ease-in-out infinite,
rotate 5s linear infinite;
}
.letters span:nth-child(odd) {
animation-direction: normal, reverse;
font-size: 60px;
color: red;
}
.letters span:nth-child(even) {
color: black;
font-size: 80px;
animation-direction: alternate;;
}
.letters span:nth-child(4n) {
color: #faa500;
font-size: 85px;
animation-direction: alternate;
}
The JavaScript:
window.addEventListener("load", function () {
let nodes = "404e404e404e404e404e404e404e404e";
nodes = nodes.split("");
let nodestoappend = document.querySelectorAll(".letters");
nodes.forEach((e, i) => {
let node = document.createElement("span");
node.style.left = (Math.random() * 75 + 'vw');
node.style.animationDelay = i + "s";
node.innerText = '404';
if (i == 3 || i == 7 || i == 11) {
console.log('e', i);
node.style.left = (50 + 'vw');
node.style.animationDelay = i + "s";
node.innerText = 'E r r o r';
}
nodestoappend[0].appendChild(node);
});
});
j