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