Naar inhoud
FFrosthaven Lab

03 — 16 varianten

Navigatie

Video-headers, mega menus met clip-preview, fullscreen video-menu, floating pills, docks en mobiele drawers.

Video-header, transparant naar vast

videohero
Marina AltaContact

scroll · transparant wordt vast

De header ligt transparant over de hero-video en wordt vast zodra je scrollt. Het patroon dat je op vrijwel elke award-site ziet. Twee dingen die het maken of breken: een gradient-overlay bovenaan de video zodat de witte nav altijd leesbaar is, en de hoogte animeren in plaats van de positie.

Mega menu met video-preview

videob2b
Casa Maestros

Tuinonderhoud

Snoei, beregening, gazon

Zwembad

Water, filters, techniek

Verhuurbeheer

Check-in, schoonmaak

hover “Diensten”, dan over de items

Elk menu-item toont zijn eigen clip in het paneel ernaast. Verkoopt diensten die je moet zien om te begrijpen: renovatie, hoveniers, klinieken. Speel alleen de actieve clip, en pas nadat het menu open is, anders laad je drie video's voor een menu dat niemand opent.

Fullscreen video-menu

videostudio
Studio Nord

open het menu, beweeg over de items

Menu vult het scherm, en de achtergrondvideo wisselt met het item waar je overheen gaat. Signatuur van studio- en portfoliosites. De niet-actieve items op 45% opacity zetten is wat het scherp maakt; alles even fel en het valt uit elkaar.

Logotype met video-vulling

videocss
NORDWERK

Het woordmerk in de header is een venster op bewegend beeld, via mix-blend-multiply. Klein, duur detail. Alleen bij een kort, vet woordmerk; bij dunne letters zie je de video niet.

Sticky blur bar

standaard
Verhoeven Bouw

De basis voor vrijwel elke klantsite: sticky, halftransparant, backdrop-blur en een randlijn onderaan. Werkt met elk archetype.

Floating pill

modern
AltadecorBel ons

Losse zwevende balk met marge rondom. Ziet er duur uit, maar kost verticale ruimte; op mobiel altijd terugvallen op een gewone balk.

Shrink on scroll

scroll
Nordwerk

Scroll de pagina: de balk krimpt van 80px naar 48px.

Header krimpt zodra je begint te scrollen, zodat de content ruimte krijgt. Scroll de pagina om het te zien. Animeer de hoogte, niet de positie, anders springt de content.

Mega menu

b2bveel content
Casa Maestros

Tuinonderhoud

Snoei, beregening, gazon

Zwembad

Water, filters, techniek

Verhuurbeheer

Sleutels, check-in, schoonmaak

hover op “Diensten”

Nodig zodra een klant meer dan zes diensten heeft. De grid-rows truc animeert netjes zonder vaste hoogte te hoeven kennen.

Dock met magnify

speels

macOS-dock: iconen groeien naar de cursor toe. Leuk voor portfolio's en studio's, niet voor een site waar mensen iets moeten vinden.

Fullscreen drawer

mobiel
Groszek

open het menu rechtsboven

Het mobiele menu waar je in negen van de tien gevallen op uitkomt. De staggered delay per item is wat het duur maakt; zonder die vertraging voelt het goedkoop.

Underline indicator

jsstate

Streepje glijdt naar het actieve item. Meet offsetLeft en offsetWidth van de knop; hardcoded posities breken zodra de tekst vertaald wordt.

Pill indicator

jsstate

Zelfde meting, maar een vullend vlak in plaats van een streep. Iets zachter; past beter bij afgeronde, vriendelijke merken.

Scroll-spy anchornav

long-form

1. Intro

Scroll dit paneel.

2. Diensten

Scroll dit paneel.

3. Prijzen

Scroll dit paneel.

4. Contact

Scroll dit paneel.

Voor lange dienstenpagina's en juridische teksten. Gebruik in productie een IntersectionObserver in plaats van scroll-events.

Command palette

saas

⌘K-zoekvenster. Hoort thuis in dashboards en documentatie. Op een klantsite met acht pagina's is het pronkzucht.