Fundus
Was im Web gerade geht. Nur das Beste, von ausgezeichneten Seiten abgeschaut, vermessen und nachgebaut.
Referenzen
308 Treffer
Seitenübergänge
-
Clip-Path-Reveal der neuen Seite (Inset, Kreis, Polygon)
-
Persistente 3D-Szene: Seitenwechsel als Kamerafahrt
-
Farbvorhang / Panel-Wipe in Markenfarbe
-
Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)
-
Vorschaubild wird zur Hero (Shared-Element-Morph)
-
Wipe mit gebogener Kante (Curved Wipe)
-
Paralleler Übergang mit Vorladen (beide Seiten gleichzeitig im DOM)
-
Richtungsbewusste Übergänge (vorwärts, zurück, hierarchisch)
-
Scroll zum nächsten Projekt (scroll-gesteuerter Seitenwechsel)
-
Neue Seite schiebt sich über die alte (Stack / Slide-over mit Parallax)
-
Seitenname als Übergang (Typo-Overlay, kinetische Schrift)
-
Spalten-, Streifen- und Jalousie-Wipe
-
3D-Kipp-Übergänge (Würfel, Ecke, Riss)
Preloader & Intro
-
Intro ohne Wartezeit (LCP-sicheres Eröffnungsballett)
-
Nahtlose Übergabe: Loader-Element wird Teil des Layouts
-
Bildstapel-Intro (Stapel flippt durch und verteilt sich ins Layout)
-
Intro nur beim ersten Besuch (Session-Gedächtnis)
-
Prozent-Zähler-Preloader (0 bis 100)
-
WebGL-Ladeszene mit echtem Fortschritt
-
Logo-Aufbau-Intro (Linien zeichnen, Teile fügen sich, Logo fliegt in die Navigation)
-
Boot-Sequenz / System-Start-Intro (Retro-Interface)
-
Kinetisches Typo-Intro (Wortwiederholung, Kreistext)
Navigation
-
Gleitender Indikator / Segment-Schalter mit Pille
-
Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück
-
Kompakte, expandierende Insel-Navigation
-
Mega-Menü mit morphendem gemeinsamem Viewport
-
Menü-Choreografie: Panel-Wipe bzw. Clip-Reveal mit asymmetrischem Schließen
-
Schwebende Pill-Navigation mit Glas bzw. Progressive Blur
-
Theme- und Sprachumschalter mit View-Transition-Kreis-Reveal
-
Vollbild-Overlay-Menü mit Riesentypo und Bildvorschau
-
Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)
-
Command-Palette (⌘K) und KI-Suche im Header
-
Live-Uhr und Standort in Navigation oder Footer
-
Menü-Button-Morph: Burger zu X und Label-Tausch „Menu/Close“
-
Mobile Bottom-Navigation und Bottom-Sheet-Menü
-
Native Dropdowns mit Popover-API, Anchor Positioning und Invokern
-
Richtungsabhängiger Marquee-Hover im Menü
-
Scrollspy-Kapitelnavigation (Sticky-Kapitelindex)
-
Seitenrand- und Vier-Ecken-Navigation
-
Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt
-
Klebende Produkt-Unternavigation mit Handlung
-
Dock-Navigation mit Vergrößerung
-
Gestapelte bzw. mehrstufige Drawer-Navigation
-
Mensch/Maschine-Umschalter (Agentenansicht)
-
Sound-Umschalter und Einstiegsgate in der Navigation
Hero & Section-Layouts
-
Bento-Grid mit lebenden Zellen
-
Sichtbares Raster (Swiss/Blueprint-Linien)
-
Gebrochenes / asymmetrisches Raster
-
Case-Study-Gerüst auf Award-Niveau
-
Kinoreifer Vollbild-Video-Hero
-
Editorial-/Magazin-Layout
-
Projektindex als Liste mit Hover-Bildvorschau
-
Übergroßer Schrift-Hero (randlos eingepasste Wortmarke)
-
Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)
-
Prompt-Hero mit rotierenden Beispiel-Prompts
-
Logo-Wand / Social-Proof-Band
-
Foto-Hero: echtes Foto, ein Satz, ein Weg
-
Meta-Labels & HUD-Typografie (Mikrotypo als Layout-Ebene)
-
Team-/Über-mich-Layout mit Porträt-Interaktion
-
Testimonials neu gedacht
-
Zahlen-/Fakten-Sektion als Typo-Ereignis
-
Produkt-UI-Hero mit Perspektiv-Tilt (Screenshot richtet sich beim Scrollen auf)
-
Prozess-/Timeline-Sektion mit wachsender Linie
-
Kontakt- und Anfrageformular als eigene Sektion
-
Termin-Buchung per 2-Klick-Einbettung
-
Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)
-
Foto-Hero mit Leiste, Karte oder Weiche
-
Foto-Hero mit Wortmarke
-
Responsive Sektionskanten mit shape()
-
Collage-/Scrapbook-Layout
-
Elastisches Raster (Spalten mit Scroll-Verzögerung)
-
Preis-Sektion mit Haltung
-
Bild-Scheiben in der Tiefe
-
Trennlinien im Raster (Gap Decorations)
-
Hero-Komposition nach Seitenverhältnis
Scroll & Section-Animationen
-
Bildsequenz-/Video-Scrub
-
Bild-Reveal per Clip-Path/Maske
-
Native CSS-Scroll-Reveals mit view()
-
Gepinnte Horizontal-Scroll-Section
-
Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)
-
Subtiler mehrschichtiger Parallax
-
Gepinnte Scrub-Sequenz (Scrollytelling)
-
Sections, die übereinander gleiten (Vorhang-Übergang)
-
Stapelkarten beim Scrollen (Stacking Cards)
-
Ein Element wandert über mehrere Sections
-
Raster/Layout formiert sich beim Scrollen
-
Smooth Scroll mit Lenis
-
Farb-/Theme-Wechsel beim Scrollen
-
CSS Scroll-Triggered Animations (zeitbasiert, ausgelöst durch Scroll)
-
Zoom-Parallax / Zoom-through
-
Abschnittsweises Einrasten (Fullpage-Snap)
-
SVG-Pfad zeichnet sich beim Scrollen
-
Verzerrung nach Scrollgeschwindigkeit (Skew/Stretch)
-
Daten-Scrollytelling
Schrift-Animationen
-
Unschärfe-Enthüllung (Blur-to-sharp) pro Wort
-
Wort-für-Wort-Aufhellen beim Scrollen
-
Maskierte Zeilen-/Wort-Enthüllung (SplitText mit Maske)
-
Text-Roll beim Hover (doppelte Zeile rollt durch)
-
Rollende Ziffern (Zahlen-Ticker / Odometer)
-
Marquee-Laufband (optional scroll-gekoppelt)
-
Scramble/Decode-Text (Zeichen entschlüsseln sich)
-
Animierte Variable-Font-Achsen
-
Gezeichnete Markierung und Unterstreichung
-
3D- und Shader-Typografie
-
Wechselnde Wörter / Begrüßungs-Loader
-
Scroll-gescrubbte Zeichen-Choreografie
-
Text auf Pfad
-
Schreibmaschine mit natürlichem Takt
-
Bild/Video in Schrift (Typo-Maske)
-
Buchstaben-Physik
-
Schimmer-/Verlaufs-Text
-
Buchstaben zerstreuen sich beim Hover
-
Echo-/Stapel-Typografie
-
Rotierendes Kreistext-Siegel (Badge, Stempel, Scroll-Hinweis)
Hover
-
Bild-Spur hinter dem Cursor (Image Trail)
-
Bild-Zoom in der Maske
-
Karten-Spotlight (Glow folgt der Maus)
-
Bildvorschau beim Listen-Hover
-
Unterstreichungs-Varianten
-
Magnetische Buttons und Elemente
-
Form-Morph-Buttons (Clip-Path)
-
Hover-Absicht und Zeitlogik
-
3D-Kippen von Karten (Tilt)
-
Nachbarn reagieren auf Hover
-
Graustufen zu Farbe / Duoton-Bildbehandlung
-
Füllung vom Eintrittspunkt
-
Hovercard / Vorschau per Interest Invoker
-
SVG-Filter-Verzerrung (Turbulenz und Gooey) für Bild und Text
Cursor
Mikroanimationen
-
Akkordeon mit Höhenanimation auf auto
-
Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)
-
Druck-Feedback (Press/Tap)
-
Ein-/Ausblenden mit @starting-style
-
Kopieren-Feedback
-
Skeleton mit Schimmer
-
Toast-Benachrichtigungen im Stapel
-
Toggle-Schalter
-
Validierung erst nach Interaktion
-
Animiertes Auswahlmenü (anpassbares select)
-
KI-Streaming-Text und Denk-Indikator mit Shimmer
-
Animierte Checkbox und Radio
-
Fortschrittsring
-
Gestaffelte Einblendung per sibling-index()
-
Gedrückt halten zum Bestätigen
-
Icon-Squash-and-Stretch (Pfeil dehnt sich)
-
Like/Herz mit Partikel-Burst
-
Scroll-Fortschrittsbalken und -ring
-
Spinner und Ladeindikatoren
-
Eckenformen mit corner-shape (Squircle, Scoop, Notch, Bevel)
-
Drag-and-drop-Sortieren mit Platzhalter- und Drop-Animation
-
In-den-Warenkorb-Flug
-
Figuren-/Maskottchen-Zustände
-
Passwortstärke-Visualisierung
-
Konfetti / Erfolgs-Feier
-
Zustandsautomat mit Datenbindung (Rive-Prinzip)
Glas & Material
-
Frosted Glass mit erweitertem Backdrop
-
Grain-/Noise-Überlagerung
-
Liquid Glass mit Refraktion
-
Animierter Mesh-Verlauf
-
Flüssigmetall / Chrom
-
Geriffeltes Glas (Fluted Glass)
-
Linien- und Punktraster
-
Progressiver Verlaufs-Blur
-
Animierter Verlaufsrahmen
-
Neo-Skeuomorphismus / taktile UI (Material mit Lichtkante)
-
Halbton-Raster
-
Papier- und Drucktextur
-
Holo-/Irisierungsfolie auf Neigung und Cursor
-
Flüssiger Marmor-Hintergrund
3D & WebGL
-
ASCII-, Dither- und Pixel-Stil (Render und Hover)
-
Glas- und Kristallobjekte in 3D
-
Interaktives 3D-Objekt im Hero
-
Morphende Partikel und Punktwolken
-
Scroll-gesteuerte 3D-Szene / 3D-Modell (Kamerafahrt)
-
Shader- und Dissolve-Übergang (Noise, Displacement, Pixel)
-
WebGL-Bildverzerrung per Shader (Hover, Linse, RGB-Shift)
-
CSS-3D-Räume und -Objekte
-
Gaussian Splats (gescannte Räume)
-
Typografie in WebGL
-
Audioreaktive 3D-Szenen
-
Instanzierte Objektfelder
-
No-Code-Shader-Hintergründe als Embed (Unicorn Studio, Paper Shaders)
-
Post-Processing-Filmlook
-
Spielbare 3D-Welt als Navigation
-
2.5D-Bilder mit Tiefenkarte
-
WebGPU mit Three.js-TSL
-
Shader auf echtem DOM (HTML-in-Canvas)
-
Spline-Szenen als Embed
-
Atmosphärische Partikel
Galerien & Slider
-
3D-Karussell / Bildzylinder (Scroll- und Drag-gesteuert)
-
Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)
-
Drag-Slider mit Trägheit und Endlosschleife
-
Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)
-
Endlose Leinwand – Drag-Galerie in alle Richtungen
-
Video-Vorschau bei Hover / im Viewport
-
Karussell-Steuerung und Anzeige
-
Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie
-
Animierter Filter- und Ansichtswechsel (FLIP / View Transitions)
-
Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)
-
Raster am Desktop, Wischreihe am Telefon
-
Tiefenflug-Galerie
-
Vollbild-Slideshow mit Masken-Schub und innerer Gegenbewegung
-
Endlose Scroll-Galerie mit Tiefenparallaxe
-
Karten-Stapel und Fächer zum Wegschnippen
-
Kuppel- und Kugel-Galerie
-
Radial- und Bogen-Slider (Karten auf Kreisbahn)
-
Vorher-Nachher-Vergleichsregler
-
Kartenfächer nach Containerbreite
-
Karussell mit verformten Karten
Footer
-
Abschluss-Footer mit großem CTA und Riesen-Wortmarke
-
Footer-Reveal (Footer liegt unter der Seite)
-
Mega-Footer mit Sitemap und Utility-Leiste
-
Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)
-
Newsletter-Modul mit Persönlichkeit
-
Interaktiver Physik-Footer
-
Footer als 3D-/Shader-Bühne
-
Kolophon: Schriften, Bildnachweis, Stand, Gewicht
Animationsstile
-
Animationsstil „Editorial langsam“
-
Animationsstil „Federnd verspielt“
-
Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)
-
Animationsstil „Physik träge“ (Lerp, Trägheit, Geschwindigkeit)
-
Animationsstil „Studio-Signatur“ (asymmetrisches Gleiten)
-
Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
-
Animationsstil „Tech präzise“ (Produkt-UI)
-
Animationsstil „Luxus weich“
-
Animationsstil „Swiss knackig“
-
Animationsstil „Brutal hart“
-
Animationsstil „Shader linear“ (Zeit linear, Form im Material)
-
Generatives Markenzeichen
Typo-Techniken
-
Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty
-
Optisch exakte Textabstände mit text-box-trim / text-box-edge
-
Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten
-
Eine Familie, wenige Gewichte (Hierarchie über Größe)
-
Gemischte Schnitte in einer Zeile (Grotesk + Kursiv-Serif)
-
Enge Laufweite und Zeilenabstand bei riesigen Headlines
-
Mono als Label- und Metaschrift (kleine Versalien)
-
Optische Größen nutzen (opsz-Achse)
-
Serif + Grotesk als ‚Duotone‘ (Mono als dritte Stimme)
-
Tabellenziffern für Preis- und Datenblöcke
-
Kondensierte Versal-Headlines auf volle Breite (fit-to-width)
-
Echte Initialen mit initial-letter
-
Text fließt um eine bewegte Form (Experiment)
Sektionen & Funktionen
-
Bewertungen mit Sternverteilung
-
Plattform-Bewertungen mit Echtheitshinweis
-
Bild mit Markierungspunkten
-
Buchungsleiste mit Datumsbereich
-
Datei-Ablage mit Vorschau und Prüfung
-
Download-Center für technische Dokumente
-
Eigener Videoplayer
-
EU-Hinweis zur Gewährleistung und Garantie-Label
-
Facettenfilter mit Ergebnisliste
-
Fahrzeugbestand aus dem Börsen-Feed
-
Fehlerseite und Leerzustände
-
Finanzierung mit Pflichtangaben und Warnhinweis
-
Traueranzeigen und Gedenkseite mit Kondolenzbuch
-
Gutschein-Konfigurator
-
Kostenrechner mit Spanne
-
Lagen mit Steckbrief und eigener Karte
-
Leistungsseite: Antwort zuerst
-
Mehrschritt-Anfrage mit Zusammenfassung
-
Objekt-Steckbrief im Exposé
-
Öffnungszeiten mit Live-Status
-
Player per Zwei-Klick (Spotify, Apple Music, Bandcamp, SoundCloud, YouTube, Vimeo)
-
Kaufbox mit Farb- und Größenwahl
-
Produktfinder in wenigen Fragen
-
Programm-Kalender mit Liste und Monat
-
Räume mit Kapazitäten je Bestuhlung
-
Reparatur-Richtpreise und Reparaturweg
-
Speisekarte als Editorial
-
Spendenmodul mit Wirkungssatz
-
Standortfinder als Liste
-
Stellenliste mit Kurzbewerbung
-
Stellenseite mit Gehalt, Ablauf und JobPosting-Daten
-
Produktseite mit technischen Daten
-
Wunschtermin mit freien Terminen und Anfrage-Übergabe
-
Tourdaten und Termine mit Ticketstatus
-
Trauerfall-Sofortleiste mit erster Anleitung
-
Vergleichstabelle mit fester Kopfzeile
-
Warenkorb als Seitenpanel
-
Wein-Steckbrief mit Pflichtangaben
-
Widerrufs- und Kündigungs-Button
-
Wochen-Kursplan mit Live-Status
-
Agentenformular mit WebMCP
-
Balkendiagramm aus Datenattributen
Zugang & Robustheit
-
Seite „Barrierefreiheit“ als Vorlage
-
Schalter „Bewegung reduzieren“ mit Pause-Knöpfen
-
Natives Modal mit <dialog>
-
Firmendaten aus einer Quelle
-
Fokus-Stil als Gestaltungssystem
-
Fehlerzusammenfassung im Formular
-
Kontrastmodus und contrast-color()
-
Lesereihenfolge im Raster
-
Sofortige Seitenwechsel durch Vorladen
-
Sprunglinks und Landmarken
-
Tabs und Segmente mit Pfeiltasten
-
Zoom- und textabstandfestes Layout
Buttons
Nichts gefunden. Vielleicht hier:
Hero & Section-LayoutsScroll & Section-AnimationenHoverSektionen & FunktionenZugang & Robustheit