Zum Inhalt
r/ rittek uiDOCS
Admin-Demo ↗

RITTEK BLOCKS / Animation & Bewegung

Animation & Bewegung. Direkt einsetzbar.

Eigenständige Bausteine für HTML und PHP. Jedes Beispiel hat seinen vollständigen Quellcode direkt darunter. Farben, Hell/Dunkel, Dichte und Schrift folgen deiner Docs-Ansicht.

Interaktionen bleiben lokale Demos. Formulare senden keine Nachrichten; es gibt keine Zahlung oder Server-Synchronisation. Beim mehrfachen Einfügen IDs eindeutig vergeben und den jeweiligen Initialisierer einmal nach dem Markup aufrufen.

Animation & Bewegung

Animationslabor · Sechs Einstiege

Sechs endliche Effekte mit Start, Pause, Fortsetzen, Zurücksetzen, Dauer und Staffelung. Systemseitige Bewegungsreduktion bleibt maßgeblich.

Vollständiges HTML herunterladen ↧

Rittek / Motion Studio 01

Bewegung mit Absicht.

Inhalte bleiben sichtbar. Du entscheidest, wann die Sequenz beginnt.

01Sanft sichtbar

fade

02Von unten

rise

03Logische Seite

inline

04Freigelegt

clip

05Leicht vergrößert

scale

06Gestaffelt gesetzt

settle

Bereit.

Ohne JavaScript oder bei ausgeschalteter Bewegung bleiben alle sechs Karten vollständig lesbar. Die Schalter verändern nur diese Vorschau.

HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Animationslabor · Sechs Einstiege · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-motion.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section id="bmo-entrances" class="bmo-lab" data-bmo-lab aria-labelledby="bmo-title">
<p class="bmo-label">Rittek / Motion Studio 01</p>
<h3 id="bmo-title" class="bmo-title">Bewegung mit Absicht.</h3>
<p>Inhalte bleiben sichtbar. Du entscheidest, wann die Sequenz beginnt.</p>
<div class="bmo-controls">
<label for="bmo-pref">Bewegung<select id="bmo-pref" class="r-input" data-bmo-preference>
<option value="system">Systempräferenz</option>
<option value="reduced">Reduziert</option>
<option value="off">Aus</option>
<option value="full">Voll, sofern systemseitig erlaubt</option>
</select>
</label>
<label for="bmo-duration">Dauer in Millisekunden<input id="bmo-duration" class="r-input" type="number" min="0" max="3000" step="50" value="600" data-bmo-duration>
</label>
<label for="bmo-delay">Staffelung in Millisekunden<input id="bmo-delay" class="r-input" type="number" min="0" max="500" step="25" value="100" data-bmo-delay>
</label>
</div>
<div class="bmo-stage">
<div class="bmo-tile" data-bmo-target="fade">
<span class="bmo-number">01</span>
<strong>Sanft sichtbar</strong>
<p>fade</p>
</div>
<div class="bmo-tile" data-bmo-target="rise">
<span class="bmo-number">02</span>
<strong>Von unten</strong>
<p>rise</p>
</div>
<div class="bmo-tile" data-bmo-target="inline">
<span class="bmo-number">03</span>
<strong>Logische Seite</strong>
<p>inline</p>
</div>
<div class="bmo-tile" data-bmo-target="clip">
<span class="bmo-number">04</span>
<strong>Freigelegt</strong>
<p>clip</p>
</div>
<div class="bmo-tile" data-bmo-target="scale">
<span class="bmo-number">05</span>
<strong>Leicht vergrößert</strong>
<p>scale</p>
</div>
<div class="bmo-tile" data-bmo-target="settle">
<span class="bmo-number">06</span>
<strong>Gestaffelt gesetzt</strong>
<p>settle</p>
</div>
</div>
<div class="bmo-actions">
<button type="button" class="r-button" data-bmo-action="play">Starten</button>
<button type="button" class="r-button" data-bmo-action="pause">Pause</button>
<button type="button" class="r-button" data-bmo-action="resume">Fortsetzen</button>
<button type="button" class="r-button" data-bmo-action="reset">Zurücksetzen</button>
</div>
<p class="bmo-status" role="status" data-bmo-status>Bereit.</p>
<p>Ohne JavaScript oder bei ausgeschalteter Bewegung bleiben alle sechs Karten vollständig lesbar. Die Schalter verändern nur diese Vorschau.</p>
</section>
<script type="module">
import {initMotionBlocks} from 'https://ui.rittek.de/assets/modules/blocks-motion.js';
const cleanup = initMotionBlocks(document.getElementById('bmo-entrances'));
// Beim Entfernen der Ansicht: cleanup();
</script>
</body>
</html>

Animation & Bewegung

Mikrofeedback · Drücken, Schalten, Prüfen

Native Steuerungen mit optionalem Druck-, Knauf- und Häkchenfeedback. Auswahl und Beschriftung funktionieren auch ohne Bewegung.

Vollständiges HTML herunterladen ↧

Motion / Mikrointeraktion

Kleine Zeichen. Klare Wirkung.

Lokale Auswahl ohne Speicherung.

HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mikrofeedback · Drücken, Schalten, Prüfen · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-motion.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section id="bmo-feedback" class="bmo-lab" data-bmo-feedback aria-labelledby="bmo-feedback-title">
<p class="bmo-label">Motion / Mikrointeraktion</p>
<h3 id="bmo-feedback-title" class="bmo-title">Kleine Zeichen. Klare Wirkung.</h3>
<div class="bmo-controls">
<label for="bmo-feedback-pref">Bewegung<select class="r-input" id="bmo-feedback-pref" data-bmo-preference>
<option value="system">Systempräferenz</option>
<option value="reduced">Reduziert</option>
<option value="off">Aus</option>
</select>
</label>
</div>
<form method="dialog" class="bmo-micro">
<button type="button" class="r-button r-button-primary bmo-press" data-bmo-press>Aktion ausprobieren</button>
<label class="bmo-switch">
<input type="checkbox" name="notify" role="switch">
<span class="bmo-switch-track" aria-hidden="true">
</span>
<span>Benachrichtigungen</span>
</label>
<label class="bmo-check">
<input type="checkbox" name="reviewed">
<svg aria-hidden="true" width="28" height="28" viewBox="0 0 28 28">
<rect x="2" y="2" width="24" height="24" rx="6"/>
<path d="m7 14 5 5 9-10"/>
</svg>
<span>Inhalt geprüft</span>
</label>
</form>
<p class="bmo-status" data-bmo-status role="status">Lokale Auswahl ohne Speicherung.</p>
</section>
<script type="module">
import {initMotionBlocks} from 'https://ui.rittek.de/assets/modules/blocks-motion.js';
const cleanup = initMotionBlocks(document.getElementById('bmo-feedback'));
// Beim Entfernen der Ansicht: cleanup();
</script>
</body>
</html>

Animation & Bewegung

Datenbewegung · Vergleich und Reihenfolge

Fiktive Wochenwerte wechseln gemeinsam in Grafik und Text. Karten werden im Dokument tatsächlich umgeordnet; Bewegung ist optional.

Vollständiges HTML herunterladen ↧

Motion / Daten & Layout

Veränderung wird nachvollziehbar.

Beispielwoche A · Fiktive abgeschlossene Aufgaben

Gestaltung
42
Entwicklung
68
Redaktion
55

Prioritäten neu ordnen

  1. 01 · Konzept
  2. 02 · Entwurf
  3. 03 · Prüfung

Keine automatische Bewegung. Alle Werte sind fiktiv.

HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Datenbewegung · Vergleich und Reihenfolge · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-motion.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section id="bmo-data" class="bmo-lab" data-bmo-data aria-labelledby="bmo-data-title">
<p class="bmo-label">Motion / Daten & Layout</p>
<h3 id="bmo-data-title" class="bmo-title">Veränderung wird nachvollziehbar.</h3>
<div class="bmo-controls">
<label for="bmo-data-pref">Bewegung<select class="r-input" id="bmo-data-pref" data-bmo-preference>
<option value="system">Systempräferenz</option>
<option value="reduced">Reduziert</option>
<option value="off">Aus</option>
</select>
</label>
</div>
<p>
<strong data-bmo-period>Beispielwoche A</strong> · Fiktive abgeschlossene Aufgaben</p>
<div class="bmo-chart" aria-hidden="true">
<div data-bmo-bar style="height:42%">
</div>
<div data-bmo-bar style="height:68%">
</div>
<div data-bmo-bar style="height:55%">
</div>
</div>
<dl class="bmo-values">
<div>
<dt>Gestaltung</dt>
<dd data-bmo-value>42</dd>
</div>
<div>
<dt>Entwicklung</dt>
<dd data-bmo-value>68</dd>
</div>
<div>
<dt>Redaktion</dt>
<dd data-bmo-value>55</dd>
</div>
</dl>
<button type="button" class="r-button" data-bmo-update>Beispielwoche wechseln</button>
<h4>Prioritäten neu ordnen</h4>
<ol class="bmo-order" data-bmo-order>
<li>01 · Konzept</li>
<li>02 · Entwurf</li>
<li>03 · Prüfung</li>
</ol>
<button type="button" class="r-button" data-bmo-reorder>Erste Karte ans Ende</button>
<p class="bmo-status" role="status" data-bmo-status>Keine automatische Bewegung. Alle Werte sind fiktiv.</p>
</section>
<script type="module">
import {initMotionBlocks} from 'https://ui.rittek.de/assets/modules/blocks-motion.js';
const cleanup = initMotionBlocks(document.getElementById('bmo-data'));
// Beim Entfernen der Ansicht: cleanup();
</script>
</body>
</html>