data-rotate and data-period attribute in tag

Question

I am trying to make a typing animation. I found a tutorial to do it but I am curious what is the purpose of the data-rotate and data-period attribute show in the span tag.

        <span
          className="font-mono text-3xl sm:text-4xl text-gray-100"
          data-period="1000"
          data-rotate='[ "Web Developer", "Web Designer", "UI/UX Designer" ]'
        >
          <span className="flex-wrap">{text}</span>
          <span className="box-border inline-block w-1 h-12 -mb-2 bg-gray-500 opacity-75 animate-cursor"></span>
        </span>

Apparently this code is pulled from a React project? (`className` is common in React). We'd need to know what the code that uses those data- attributes is before we could tell you what it's being used for. — Heretic Monkey, Jul 22 '22 at 16:48

score 2 · Answer 1 · answered Jul 22 '22 at 17:24

data-* attributes are usually used to store data in HTML, which can then be fetched inside JavaScript.

Here's an example in where JavaScript reads the data-* attributes and fallbacks (i.e: for speed) to a predefined default value:

const rand = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

const typer = (el) => {

  const texts = JSON.parse(el.dataset.rotate);
  const period = +el.dataset.period || 1000;
  const speed = +el.dataset.speed || 200;
  const textsTot = texts.length;

  let tx = 0;
  let ch = 0;
  let chTot = 0;
  let text = ""

  const typeIt = () => {
    if (ch > chTot) return setTimeout(typeText, period);
    el.textContent = text.substring(0, ch++);
    setTimeout(typeIt, rand(Math.min(60, speed - 80), speed + 80));
  };


  const typeText = () => {
    ch = 0;
    text = texts[tx];
    chTot = text.length;

    typeIt();

    tx += 1;
    tx %= texts.length;
  };

  typeText();

};

document.querySelectorAll("[data-rotate]").forEach(typer);

/* PULSATING CARET */

[data-rotate]:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2px;
  height: 1em;
  background: #000;
  animation: caretPulsate 1s linear infinite;
}

@keyframes caretPulsate {
  0% { opacity: 1; }
  50% { opacity: 1; }
  60% { opacity: 0; }
  90% { opacity: 0; }
}

<span data-period="1000" data-rotate='[ "Web Developer", "Web Designer", "UI/UX Designer" ]'></span>
<br>
<span data-period="2000" data-speed="300" data-rotate='[ "Welcome to...", "Stack", "Overflow" ]'></span>

in where the above is basically a remake (from jQuery to pure JS) of: Typing animated text

Gibz · Answer 2 · 2022-07-22T17:01:30.333

-1

Basically data-* tags are tags that have no effect on the visual representation. You can use it to store extra information about the element or can use it for identification purposes or even for automation purposes

The exact purpose of the data-* tags used in the specific example you have shared cannot be understood unless we understand the context and where this is used in the code.

Refer data-* docs

edited Jul 22 '22 at 17:01

answered Jul 22 '22 at 16:43

Gibz

89
6

3

While this information is indeed true, it doesn't really answer the specific question. I understand it's challenging when you don't have enough rep to comment, but putting generic answers to incomplete questions is not really the way to get ahead. – Heretic Monkey Jul 22 '22 at 16:49

data-rotate and data-period attribute in tag

2 Answers2