TYPO3 Intro Element mit animiertem Text, 4. Februar 2024

Animierter Text

Dies ist die erste Zeile
eine zweite Zeile

& "zufällige" Reihenfolge
Sonderzeichen werden escaped

Dieses TYPO3 Element als Intro-Element ansehen.

Das Inhaltselement animierter Text ist für Intros gedacht. Sie können mehrere Textelemente mit Überblendungseinstellungen pro Element und Zeichen erzeugen. Die Textelemente haben im HTML Markup CSS-Klassen pro Block, Zeile und Zeichen und verschiedene Data-Attribute.
Auszug aus dem erzeugten HTML Markup:

<span class="animated_text_line animated_text_line-odd" style="animation-delay: 11000ms;">
    <span class="animated_text_word"
          data-sd-word="Dies"
          data-sd-word-letter-count="4">
        <span class="animated_text_letter"
              data-sd-letter-letter="D"
              data-sd-letter-code="68"
              data-sd-letter-no="1"
              data-sd-letter-no-total="1"
              style="animation-delay: 1200ms;animation-duration: 1000ms;">D</span>
        <span class="animated_text_letter"
              data-sd-letter-letter="i"
              data-sd-letter-code="105"
              data-sd-letter-no="2"
              data-sd-letter-no-total="2"
              style="animation-delay: 1400ms;animation-duration: 1000ms;">i</span>
        <span class="animated_text_letter"
              data-sd-letter-letter="e"
              data-sd-letter-code="101"
              data-sd-letter-no="3"
              data-sd-letter-no-total="3"
              style="animation-delay: 1600ms;animation-duration: 1000ms;">e</span>
        <span class="animated_text_letter"
              data-sd-letter-letter="s"
              data-sd-letter-code="115"
              data-sd-letter-no="4"
              data-sd-letter-no-total="4"
              style="animation-delay: 1800ms;animation-duration: 1000ms;">s</span>
    </span>
    <span class="animated_text_letter animated_text_letter-space"> &nbsp; </span>
    <span class="animated_text_word"
          data-sd-word="ist"
          data-sd-word-letter-count="3">
        <span class="animated_text_letter"
              data-sd-letter-letter="i"
              data-sd-letter-code="105"
              data-sd-letter-no="1"
              data-sd-letter-no-total="6"
              style="animation-delay: 2200ms;animation-duration: 1000ms;">i</span>
        <span class="animated_text_letter"
              data-sd-letter-letter="s"
              data-sd-letter-code="115"
              data-sd-letter-no="2"
              data-sd-letter-no-total="7"
              style="animation-delay: 2400ms;animation-duration: 1000ms;">s</span>
        ...
    </span>
</span>