Customizable Text Rotator In Vanilla JavaScript

Category: Animation , Javascript , Text | April 12, 2024
Views Total:24 views
Official Page:Go to website
Last Update:April 12, 2024


Customizable Text Rotator In Vanilla JavaScript


A simple yet customizable text rotator that allows you to loop through a group of text strings wrapped in HTML elements with a cross-fading effect.

It can be useful for showcasing customer testimonials, promoting various products, or highlighting key benefits on your webpages.

How to use it:

1. Wrap the text you want to rotate in a span (or any other HTML element). The data-options attribute is required and holds the text options separated by the | character.

I Love <span class="text-rotator" data-options="JavaScript|CSS/CSS3|HTML5"></span>

2. Load the required JavaScript and CSS files in the document.

<link rel="stylesheet" href="src/styles.css" />
<script src="src/script.js"></script>

3. Initialize the text rotator and done.

document.addEventListener("DOMContentLoaded", function () {
  // initialize the text rotator on all elements with the text-rotator Class
  var elements = document.getElementsByClassName("text-rotator");
  for (var i = 0; i < elements.length; i++) {
    new QubasTextRotatorTurbo(elements[i]);

4. Config the text rotator by add the following HTML data attributes to the wrapper element.

  • data-random: Control the randomization of text order. Default: “false”,
  • data-mode: “fadeoutandreplace” (default) or “fadeoutthenreplace”
  • data-rand-max-sleep: Define the max number of timing intervals between text changes. Default: “500”
  • data-baseline-sleep: Define the baseline delays between text changes. Default: “2000”

You Might Be Interested In:

Leave a Reply