Type play
Ein paar Buchstaben bekommen etwas Bewegungsfreiheit.
Anpassen
Die Idee
Eine kleine typografische Spielwiese. Ändere das Wort, Schriftstärke, Zeichenabstand, Mausradius und Hub. Bewege anschließend die Maus über die Buchstaben.
So funktioniert es
Jeder Buchstabe ist ein eigenes Element. Sein Abstand zum Mauszeiger bestimmt einen kleinen vertikalen Versatz, den GSAP animiert. Verlässt die Maus den Bereich, kehren die Buchstaben zur Grundlinie zurück.
Textfeld und Regler funktionieren mit Tastatur und Touchscreen. Die Systemeinstellung für reduzierte Bewegung deaktiviert die Mausanimation; die übrigen Einstellungen bleiben verfügbar.
Ausprobieren
Beginne mit einem kurzen Wort und großzügigem Zeichenabstand. Mache die Schrift dann kräftiger und rücke die Buchstaben näher zusammen. Dasselbe Wort kann sich überraschend unterschiedlich anfühlen.
Diese Demo wurde für die erste Version dieser Website erstellt.
Bedienelemente
Das gemeinsame Anpassen-Panel verwendet native Bereichseingaben unter den gefüllten Reglern. Dadurch bleiben Pfeiltasten und Touchbedienung erhalten. Schalte die Mausinteraktion für eine statische Ansicht aus oder stelle mit Zurücksetzen die Ausgangswerte wieder her. Die Schriftgröße berücksichtigt die Breite der Fläche, damit längere Wörter und große Abstände auch auf kleinen Bildschirmen passen.