Amazing Multiple Font Animation

Hello guys, today I am going to show you how to create amazing multiple font animation.

Multiple Font Animation step by step

Step 1 — Creating a New Project

The first thing we’ll do is create a folder that will contain all of the files that make up the project. Create an empty folder on your devices and name it “ Multiple Font Animation”.

Open up Visual Studio Code or any Text editor, and create files(index.html, style.css, main.js) inside the folder. for creating font animation. In the next step, you will start creating the structure of the webpage.

Step 2 — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple font animation</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Encode+Sans+SC:wght@300&family=Roboto&family=Tourney&family=Ubuntu&family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

<div class="container">
        <h2 class="anim-heading">
            <span class="letter">S</span>
            <span class="letter">T</span>
            <span class="letter">A</span>
            <span class="letter">C</span>
            <span class="letter">K</span>
            <span class="letter">F</span>
            <span class="letter">I</span>
            <span class="letter">N</span>
            <span class="letter">D</span>
            <span class="letter">O</span>
            <span class="letter">V</span>
            <span class="letter">E</span>
            <span class="letter">R</span>
        </h2>
    </div>

Step 3 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

* {
  padding: 0;
  margin: 0;
}
body {
  height: 100vh;
  width: 100%;
  background: #4b00ff;
  color: #fff;
  overflow: hidden;
  font-family: 'Encode Sans SC', sans-serif;
}
.container {
  width: 90%;
  margin: auto;
  height: 100%;
}
.anim-heading {
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  height: 100%;
}

Step 4 — Adding some lines of JavaScript code

In this step, we will add some JavaScript code to create random font animation.

const fonts = [
  'Encode Sans SC',
  'Roboto',
  'Tourney',
  'Ubuntu',
  'Zen Tokyo Zoo',
];

const letters = document.querySelectorAll(".letter");

let count = 0;

const fontAnim = () => {
  letters.forEach(letter => {
    let randomFontIndex = Math.floor(Math.random() * fonts.length);
    let randomFont = fonts[randomFontIndex];

    letter.style.fontFamily = randomFont;
  });
}

let fontAnimation = setInterval(function() {
  fontAnim();
  clearInterval(fontAnimation);
}, 100)