Create a text rotation effect

To make your website more attractive, you can add this cool effect, which will display multiple words that will follow one another with a deletion and retyping effect in a loop. This effect can be placed at the end of a sentence like in a text.

Step 1

Let's start by inserting the libraries into the HTML code.

<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
</head>

We will simply insert the libraries we need. In this case, jQuery and Typed.

The first (jQuery) will allow us to code our animation much more quickly, while the second (Typed) will enable us to create our animation with an effect that gives the impression that someone is typing and deleting the text.

Step 2

The HTML code.

<body>
  <div class="presentation">I am, <span class="texte"></span></div>
</body>

We will need the .texte class contained within the span tag to add the text we want to appear and then disappear in a loop automatically.

Step 3

Style the presentation class.

.presentation {
    font-weight: bold;
    font-size: 20px;
    }

Step 4

We will now handle the rotation.

$(document).ready(function(){
    var typed = new Typed(".texte", {
        strings: ["developer", "freelancer","blogger"],
        typeSpeed: 80,
        backSpeed: 60,
        loop: true
    });
});

In the previous step, we used jQuery to wait for the page to fully load before adding our animation.

Once our page is loaded, we use the Typed function, which allows us to define the strings of characters to display (strings).

For managing the typing, we will use typeSpeed and backSpeed for deletion. We then specify whether we want the animation to loop continuously or not using loop.

Congratulations! Your animation is ready!