lms-componentsDemo

Textanimationen

Bewegte Schrift — Enthüllen, Wechseln, Verformen. Aus Inspira UI übernommen.

Sparsam einsetzen: in einer Schulung konkurriert jede Bewegung mit dem Inhalt. Für ruhige Auszeichnung im Fließtext gibt es LmsMarkdown.

FxColourfulText

Farbwechselnder Text

Stand der Technik

FxEncryptedText

Aus Zeichensalat entschlüsselt

Vertraulich behandeln

FxHyperText

Zeichen rattern durch

MELDEKETTE

FxFlipWords

Wort blättert durch eine Liste

Wir schützen Daten

FxMorphingText

Wort zerfließt ins nächste

FxContainerTextFlip

Behälter zieht die Breite mit

betroffen

FxLetterPullup

Buchstaben ziehen versetzt herein

G

r

u

n

d

s

c

h

u

t

z

FxLetterSwap

Buchstaben tauschen beim Überfahren

FxScrewText

Buchstaben drehen sich

Meldepflicht

FxVariableLetterText

Schriftachsen je Buchstabe

FxSparklesText

Funkensprühender Text

Bestanden

FxRadiantText

Lichtstreifen über dem Text

Neu in dieser Fassung

FxLineShadowText

Gestreifter Schlagschatten

NIS-2

FxText3d

Räumlicher Text

Modul 5

FxTextGlitch

Bildstörung

Passt zu Inhalten über Angriffe und Ausfälle.

Systemausfall

FxTextHoverEffect

Kontur füllt sich beim Überfahren

FxSpinningText

Text auf einer Kreisbahn

melden · bewerten · erkennen ·

FxBreathingText

Atmende Strichstärke

FxUnderlineText

Einlaufende Unterstreichung

Artikel 21

FxHighlightText

Markierung fährt ein

wesentliche Einrichtung

FxFocus

Wörter werden nacheinander scharf

ErkennenBewertenMeldenDokumentieren

FxTextReveal

Zeilenweises Erscheinen

Wer nicht dokumentiert, hat im Zweifel nichts getan.

FxTextScrollReveal

Wort für Wort beim Scrollen

BetroffenheitBetroffenheitprüfenprüfenkostetkosteteineeineStunde.Stunde.SieSienichtnichtzuzuprüfenprüfenkannkannMillionenMillionenkosten.kosten.

FxTextRevealCard

Karte gibt Text unter der Maus frei

Wir sind nicht betroffen.

Doch — über die Lieferkette.

FxScrollSwapText

⚠️ Braucht eine containerRef auf ein Scrollelement. Aus Markdown heraus nicht setzbar — verwendbar nur in einer .vue-Datei.

Quelltext für eine .vue-Datei

Nur zum Ansehen — dieses Beispiel lässt sich nicht aus Markdown ausführen.

<script setup lang="ts">
const container = ref<HTMLElement>()
</script>

<template>
  <div ref="container" class="h-96 overflow-y-auto">
    <FxScrollSwapText :container-ref="container" label="Meldekette" />
  </div>
</template>

FxVariableText

⚠️ Braucht ebenfalls eine containerRef. Nur in einer .vue-Datei nutzbar.

Quelltext für eine .vue-Datei

Nur zum Ansehen — dieses Beispiel lässt sich nicht aus Markdown ausführen.

<FxVariableText
  :container-ref="container"
  label="Stand der Technik"
  from-font-variation-settings="'wght' 300"
  to-font-variation-settings="'wght' 900"
/>