lms-components

Reiter mit wanderndem Aktivfeld und gestapeltem Inhaltswechsel.

Leiste im Stil einer macOS-Dock mit vergrößernden Symbolen.

Reiter, deren Aktivfeld zähflüssig mitfließt.

Schwebende Leiste, die den Scrollfortschritt anzeigt.

Schmale Hinweisleiste über dem Seiteninhalt, etwa für einen Beta-Vermerk.

Welche Kompetenzen ein Modul trainiert — als Reihe kleiner Marken.

Nummerierter Abschnittstrenner mit großer Ziffer im Hintergrund.

Fußzeile: Linkspalten, Förderhinweis, Version und Copyright.

Kopfleiste der Anwendung: Marke, Sprungnavigation, Hell-/Dunkel-Umschalter und eine Aktion.

Metazeile eines Lernmoduls: Typ-Badge, Lesezeit, Autor, Stand.

Wie weit man im Text ist — eine dünne Leiste, die mitläuft.

Abschnittshülle: Eyebrow, Titel, Einleitung, Inhalt, Fußnote.

Fortschritt als Kette einzelner Abschnitte statt als ein Balken.

Abschlussblock mit Handlungsaufforderung.

Einstieg eines Lernmoduls.

Vor- und Zurück-Navigation zwischen Lernmodulen.

Abschluss eines Lernmoduls: Bestätigung, Weiterführung, Anschlusskarten.

Blendet Inhalt weich aus der Unschärfe ein.

Enthüllt Inhalt hinter einem wegfahrenden Farbbalken.

Lässt Text Wort für Wort erscheinen.

Unterlegt eine Textstelle mit einer einfahrenden Markierung.

Schreibt Text zeichenweise und wechselt zwischen mehreren Sätzen.

Begriffsliste als aufklappbares Glossar.

Abschnittsüberschrift auf farbigem Balken.

Wandelt Inline-Auszeichnung in HTML: **fett**, *kursiv*, `code`, [text](url).

Fließtext mit optionalen Aufzählungen, Zitat und Randnotiz.

Kurze Anekdote aus dem Arbeitsalltag, als Zitatkarte mit Sprecher.

Hervorgehobene Kernaussage am Ende eines Abschnitts.

Hervorgehobener Hinweis im Fließtext.

Stimmen mit Bild, die nacheinander durchwechseln.

Kartenkarussell, dessen Karten sich zu Vollbildern öffnen.

Ungleichmäßiges Kachelraster für Übersichtsseiten.

Aufgeschlagenes Buch in drei Dimensionen.

Karte, die ihre Inhalte beim Überfahren räumlich anhebt.

Karte mit Lichtkegel, der dem Mauszeiger folgt.

Kartenstapel, der beim Scrollen in den Fokus rückt.

Karussell in drei Dimensionen, frei drehbar.

Würfel mit vier Seiten, per Ziehen drehbar.

Stimmenbereich mit großer Typografie und Parallaxe.

Bildkarte, die je nach Anfahrrichtung anders aufdeckt.

Kartenstapel mit wechselnden Bildern und Überschriftaufbau.

Karte, die sich beim Überfahren umdreht.

Karte, die dem Mauszeiger perspektivisch folgt.

Karte mit Lichtreflex beim Überfahren.

Stimmenwechsler mit Bild und weichem Textübergang.

Basiskarte.

Raster aus Karten.

Kategorien als Reiter, je Kategorie eine Erklärung und ein Beispiel.

Bildraster mit Bildunterschriften.

Die Einstiegskarte eines Lernpfads — Bild, Modul, Titel, Stand.

Rollen mit Risiko und Empfehlung.

Nummerierte Leitfragen als Kartenreihe.

Einzelne Kennzahl.

Kachelrahmen — Icon, Titel, Unterzeile, Zählmarke, Inhalt, Fußknopf.

Liste, deren Einträge nacheinander einlaufen.

Aufklappbarer Datei- und Ordnerbaum.

Was sich geändert hat — Einträge mit Punkten und Marken.

Abhakbare Liste zum Selbstprüfen.

Der Lernpfad eines Moduls, mit Haken an dem, was schon erledigt ist.

Liste weiterführender Verweise und Quellen.

Nummerierte Schrittliste.

Lernzielliste in einer abgesetzten Fläche.

Woher es stammt — die Quellenangabe am Ende eines Moduls.

Schieberegler über zwei Bildern für Vorher-Nachher-Vergleiche.

Zwei Seiten gegenüberstellen, etwa "so nicht" gegen "so besser".

Möglichkeiten, nach Stärke geordnet.

Tabelle mit optionaler Farbgebung je Kopfspalte und je Zeile.

iPhone als SVG-Rahmen um einen Screenshot.

Browserfenster als SVG-Rahmen um einen Screenshot.

Zeitachse mit mitlaufender Fortschrittslinie beim Scrollen.

Chronik — Stationen einer Entwicklung, eine nach der anderen.

Fallblattanzeige — für eine Frist, die näher rückt.

Anleitungsschritt mit Bild links und Text rechts.

Waagerechte Kette aus Schritten, mit Pfeilen dazwischen.

Platzhalter für noch fehlende Medien oder für interaktive Elemente, die erst im fertigen Kurs erscheinen.

Nummerierte Schrittfolge, wahlweise als Liste oder als bedienbarer Stepper.

Zeitachse mit Stationen.

Runder Fortschrittsring mit animiertem Zahlenwert.

Konfetti-Regen, etwa nach einem bestandenen Quiz.

Schrittfolge, die nacheinander abgehakt wird.

Zählt eine Zahl animiert auf ihren Zielwert hoch.

Fallbeispiel: Erzähltext links, Kennzahlen rechts.

Mehrere Aufgaben, gemeinsam abgegeben.

Eine Seite innerhalb von `LmsExam`.

Lückentext: die fehlenden Wörter liegen daneben und werden eingesetzt.

Eine Gewohnheit, die aus dem Modul in den Alltag mitgenommen wird.

Ein Bild, in dem die verdächtigen Stellen zu finden sind.

Einträge in die richtige Reihenfolge bringen.

Paare finden — was gehört zu was?

Ausgewertete Umfrage als Balkenreihe — wahlweise zum Mitmachen.

Bestätigung am Modulende, mit weiterführenden Schaltflächen.

Quiz mit einer oder mehreren Fragen, Einzel- oder Mehrfachauswahl.

Rückmeldung am Modulende — wie hilfreich war das?

Reflexionsfrage mit Notizfeld und optionalen Denkanstößen.

Frage stellen, Antwort aufdecken.

Einleitung zu einer Selbsteinschätzung: Rahmen, Auftrag, Leitfrage.

Karten in Ablagen einsortieren.

Vorgelesener Text, in dem das gesprochene Wort mitläuft.

Video mit Haltepunkten, die das Abspielen unterbrechen.

Ein Authenticator-Code, der wie ein echter tickt.

Ein Passwort wird Zeichen für Zeichen geknackt.

Umschalter zwischen Hell- und Dunkelmodus, mit sichtbarer Beschriftung.

Nachgebautes Browserfenster mit Anmeldemaske und Passwortvorschlag.

Zweiten Faktor einrichten — zum Mitmachen, mit echtem TOTP.

Zeigt eine Passphrase als Wortkacheln mit Stärkebalken.

QR-Code — der Sprung vom Bildschirm aufs Telefon.

Einmal-Codes als Notbremse, daneben die Aufbewahrungsregeln.

Die Angriffskette — sie muss nur an einer Stelle brechen.

Was offensteht — absichern, dann den Angreifer scannen lassen.

Was der Angriff eingebracht hat — die Beute, aufgelistet.

Posteingang sortieren — echt oder Phishing?

Browser-Attrappe — Fensterrahmen mit Adresszeile.

Mail-Attrappe — eine Nachricht, wie sie im Postfach steht.

Telefon-Attrappe — Rahmen um einen Bildschirminhalt.

Terminal-Attrappe — Ausgabe, die wie eine Konsole aussieht.

Balkendiagramm — Größen nebeneinander vergleichen.

Blasendiagramm — zwei Größen, dazu eine dritte im Radius.

Ringdiagramm — Anteile mit freier Mitte.

Liniendiagramm — Verlauf über eine geordnete Achse.

Kuchendiagramm — Anteile eines Ganzen.

Polardiagramm — gleiche Winkel, unterschiedliche Radien.

Netzdiagramm — ein Profil über mehrere Achsen.

Streudiagramm — zwei Größen gegeneinander.

Ein Abzeichen — freigeschaltet oder noch nicht.

Alle Abzeichen im Raster, mit Kopfzeile und Gesamtfortschritt.

Themenfeld als farbiger Chip.

Die Kachel „Meine Ziele" — Abzeichen als Vorschau.

Eine Gewohnheit zum Abhaken.

Eine Gewohnheit anlegen oder ändern.

Die Kachel „Meine Gewohnheiten" — was heute noch offen ist.

Vorlagen aus den Schulungen übernehmen.

Aktivitätsraster — ein Kästchen je Tag, dunkler bei mehr.

Die Kachel „Meine Aktivität" — das Raster mit einer Gesamtzahl darüber.

Dialog, der räumlich aus der Fläche heraus aufklappt.

Kurzinfo, die dem Mauszeiger folgt.

Raster aus Kacheln, die versetzt aufklappen.

Lichtpunkt, der am Rand eines Elements entlangläuft.

Inhalte kreisen um einen Mittelpunkt, halten bei Berührung.

Behälter, dessen Inhalt sich mit dem Scrollfortschritt verformt.

Bilder in Echtzeit gerastert, für einen Retro-Eindruck.

Beliebiger Inhalt schwebt fortlaufend im Raum.

Rahmen, der von innen heraus leuchtet.

Schimmer am Rand, der auf Mausnähe reagiert.

Abzeichen mit Bildern, die beim Überfahren aufblättern.

Lupe, die über Bilder oder Videos fährt.

Vorschaubild, das an einem Verweis aufklappt.

Endlos laufendes Band, waagerecht oder senkrecht.

Bild oder Video, das zwischen zwei Textteilen aufgeht.

Sternschnuppen, die schräg durch die Fläche ziehen.

Rahmen im Leuchtröhren-Stil.

Elemente kreisen auf einer Bahn um die Mitte.

Ebenen bewegen sich unterschiedlich schnell mit dem Zeiger.

Bild, das in Partikel zerfällt und sich wieder sammelt.

Inhalt läuft an einer frei gezeichneten Linie entlang.

Unschärfe, die zu einer Seite hin zunimmt.

Hintergrund aus wiederkehrenden Linien.

Fläche, die man freirubbeln muss.

Beliebige GLSL-Shader im Browser ausführen.

Maske, die Inhalt entlang der Mausbewegung freigibt.

Spielbarer Tetris-Hintergrund.

Leuchtender Strich, der dem Lesefortschritt folgt.

Text, dessen Strichstärke gleichmäßig atmet.

Text in wechselnden Farben mit Skalierungseffekt.

Behälter, der Wörter durchblättert und die Breite mitzieht.

Text, der aus Zeichensalat heraus entschlüsselt erscheint.

Einzelnes Wort, das durch eine Liste blättert.

Wörter im Satz werden nacheinander scharf gestellt.

Textstelle, über die eine Markierung fährt.

Text, dessen Zeichen beim Überfahren durchrattern.

Buchstaben ziehen versetzt von unten herein.

Buchstaben tauschen sich beim Überfahren senkrecht aus.

Text mit gestreiftem Schlagschatten.

Text, der von einem Wort ins nächste zerfließt.

Text mit einem darüberziehenden Lichtstreifen.

Buchstaben drehen sich beim Überfahren um die eigene Achse.

Text tauscht sich beim Durchscrollen senkrecht aus.

Text, aus dem fortlaufend Funken sprühen.

Text, der auf einer Kreisbahn läuft.

Text mit räumlicher Tiefe und Schattenwurf.

Text mit Bildstörung und versetzten Farbkanälen.

Text, dessen Kontur beim Überfahren mit Verlauf gefüllt wird.

Text erscheint zeilen- oder wortweise.

Karte, die ihren Text unter der Mausbewegung freigibt.

Text wird Wort für Wort beim Scrollen aufgedeckt.

Unterstreichung, die beim Überfahren einläuft.

Buchstaben ändern beim Überfahren ihre Schriftachsen.

Schriftachsen reagieren auf die Nähe des Zeigers.

Hintergrund mit langsam wandernden Polarlichtern.

Hintergrund mit einem Sog in ein schwarzes Loch.

Hintergrund mit aufsteigenden Blasen.

Hintergrund mit fallenden Sternen und Leuchtspuren.

Shader-Hintergrund mit fließenden, netzartigen Mustern.

Hintergrund mit Partikeln in einem Strudel.

Weicher Shader-Hintergrund wie fließende Seide.

Shader-Hintergrund mit einem Sog zur Mitte.

Sternenfeld mit Parallaxe in mehreren Ebenen.

Shader-Hintergrund mit fraktalen Strukturen.

Shader-Hintergrund mit Wetterleuchten in Wolken.

Räumliches Portal mit leuchtenden Ringen.

Hintergrundraster mit flackernden Zellen.

Rasterhintergrund, dessen Zellen auf den Zeiger reagieren.

Lichtkegel von oben, wie eine Bühnenlampe.

Hintergrund, der wie eine Flüssigkeit auf Bewegung reagiert.

Hintergrund mit treibenden Partikeln.

Hintergrund mit einem sich bewegenden Muster.

Konzentrische Ringe, die nach außen laufen.

Hintergrund mit fallendem Schnee.

Funken, die über der Fläche aufblitzen.

Text, durch den ein Video sichtbar wird.

Hintergrund mit einem wirbelnden Sog.

Behälter, dessen Inhalt räumlich verzogen wird.

Hintergrund mit langsam laufenden Wellen.

Leuchtender Strahl, der zwei Elemente verbindet.

Gebogene 3D-Galerie, die beim Scrollen mitläuft.

Bildergalerie, deren Bilder beim Überfahren aufgehen.

Drehbarer Globus mit Bögen zwischen Orten.

Drehbarer Globus mit Punktraster.

Symbolwolke, die sich räumlich dreht.

Bildschirmfüllender Bildwechsler mit Tastatursteuerung.

Endloses Raster, das sich beim Ziehen fortsetzt.

Fahrt durch Lichtstreifen wie im Tunnel.

Glasartige Verzerrung über dem darunterliegenden Inhalt.

Logo, das sich flüssig verformt.

Reihe von Logos, die laufend durchwechseln.

Logo, das sich wie Papier faltet.

Fotogalerie, die sich beim Erscheinen auffächert.

Einbettung einer Spline-Szene aus dem 3D-Werkzeug.

Weltkarte mit animierten Verbindungsbögen.

Knopf mit umlaufendem Farbverlauf am Rand.

Knopf, der beim Überfahren seine Form wechselt.

Knopf mit umlaufendem Regenbogenrand.

Knopf, bei dem eine Welle vom Druckpunkt ausgeht.

Knopf mit einem darüberwandernden Glanz.

Schieberegler, der zwei Anteile gegeneinander verteilt.

Farbwähler mit mehreren Farbräumen und Barrierefreiheitsangaben.

Dateiauswahl mit Ziehen und Ablegen.

Suchfeld mit leuchtenden Ringen.

Eingabefeld mit leuchtendem Rand beim Überfahren.

Kalender, der Termine federnd aufklappt.

Eingabefeld, dessen Text beim Absenden zerstäubt.

Mauszeiger hinterlässt eine flüssig verlaufende Spur.

Mauszeiger zieht eine Spur aus Bildern hinter sich her.

Mauszeiger zieht eine schwingende Linie nach.

Eigener Mauszeiger mit federnder Verzögerung.

Mauszeiger zieht ein farbiges Band hinter sich her.