DEV Community

Cover image for Amazing Multiple Font Animation
Stackfindover
Stackfindover

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Multiple Font Animation Final Result

Oldest comments (0)