Text Animationen
Animierter Text
Dies ist die erste Zeile
eine zweite Zeile
eine zweite Zeile
& "zufällige" Reihenfolge
Sonderzeichen werden escaped
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"> </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>