WebGL-Shader
Der Hintergrund im Kopfbereich ist kein Video, sondern ein Programm, das jedes Bild neu berechnet: wenige Kilobyte statt mehrerer Megabyte — und er reagiert auf den Mauszeiger.
Technik-Demo · kein Kundenprojekt
Jede Bewegung auf dieser Seite ist von Hand gebaut — mit derselben Technik, die wir in Kundenprojekten einsetzen. Scrollen Sie einfach weiter.
Warum das zählt
Deshalb setzen wir Websites nicht aus Baukasten-Blöcken zusammen. Layout, Typografie und Bewegung entstehen für Ihr Unternehmen — nicht für eine Vorlage, die schon Zehntausende andere benutzen.
Bausteine
Sieben Techniken, die diese Seite tragen
Zur Seite scrollen oder wischen
Scroll-gekoppelt
Sie scrollen — die Seite im Rahmen scrollt mit
Die Sektion bleibt stehen, während der Inhalt im Browserfenster weiterläuft. So lässt sich eine ganze Seite zeigen, ohne dass jemand die aktuelle verlässt.
Der Inhalt im Rahmen ist bewusst abstrakt gehalten: Er zeigt Aufbau und Rhythmus einer Seite, nicht die Website eines bestimmten Kunden.
floxa.de/ihre-neue-seite
Grenzen
Effekte zählen erst, wenn die Seite trotzdem schnell bleibt
- <2,5s
- Largest Contentful Paint
- <0,10
- Cumulative Layout Shift
- 60fps
- Bildrate beim Scrollen
- 100%
- Mit Tastatur bedienbar
Der größte sichtbare Inhalt steht in unter 2,5 Sekunden.
Nichts springt beim Laden — keine Fehlklicks, kein Zurückscrollen.
Animiert wird nur, was die Grafikkarte flüssig schafft.
Jeder Link, jeder Button — auch ganz ohne Maus erreichbar.
Das sind unsere Zielwerte für neue Projekte, keine Messwerte aus einem Kundenkonto. Google bewertet genau diese Größen — deshalb stehen sie hier und nicht im Kleingedruckten.
Schematisch
So sieht Sichtbarkeit aus, wenn sie wächst
Die Linie zeichnet sich, während Sie scrollen — mit mitlaufendem Marker und mitzählender Platzierung. So lassen sich Entwicklungen zeigen, die in einer Tabelle niemand liest.
47Position bei Google
Zum Ausprobieren
Details, die man erst mit der Maus findet
Fahren Sie mit dem Zeiger über die drei Flächen. Auf dem Smartphone bleiben sie ruhig — dort gibt es keinen Mauszeiger, den man belohnen könnte.
Magnetisch
Der Button neigt sich zum Zeiger, die Beschriftung folgt einen Tick später. Man trifft ihn leichter — und merkt sofort, dass die Seite reagiert.
Zeiger hierher bewegen
3D-Neigung
Die Fläche kippt in Richtung des Zeigers, der Glanzpunkt wandert mit. Zwei Achsen, kein 3D-Framework, wenige Zeilen Code.
Label-Wechsel
Die Beschriftung rollt beim Überfahren um eine Zeile weiter. Reines CSS — funktioniert, bevor auch nur ein Skript geladen ist.
Ende der Demo
Nicht jedes Projekt braucht alles davon. Wir wählen aus, was zu Ihrem Publikum passt — und lassen weg, was nur uns Spaß macht. Erzählen Sie uns, was Sie vorhaben.
Diese Seite ist eine Technik-Demo von Floxa und kein Kundenprojekt. Die Zahlen oben sind Zielwerte, die Kurve ist schematisch, die Inhalte im Browserrahmen sind Platzhalter.