(01) Lab
Tre prototyper for neste nestestudio.no
Kvadratisk-pila som markør, K11 Pilnett som levende mønster og det runde seglet som roterer med scrollen. Alt er ren CSS/SVG og vanlig JS uten bibliotek, og respekterer redusert bevegelse. Prøv å markere denne teksten: markeringen bruker kontrastforslag A (#000 på #C8501E, 4,62:1).
(02) Kvadratisk-markører
Hold musa over flisene
Native SVG-markører (WO-teknikken): ingen forsinkelse og ingen JS. Hotspot og fallback står under hver. «dra» bytter til «dra-aktiv» mens du holder knappen nede. Skjermbilder viser ikke systemmarkøren, så hver tilstand er også tegnet i flisa.
standardStandardpeker: pila peker opp-venstre som en systempeker, blekk med papirkant7 7, default
lenkeLenker og knapper: oransje pil mot høyre, hotspot i midten20 20, pointer
eksternEkstern lenke: blekkpil mot nordøst20 20, alias
apneCase-kort: K05-flisa med pil mot nordøst28 28, pointer
nesteKarusell høyre sone24 24, e-resize
forrigeKarusell venstre sone24 24, w-resize
ned«Se mer»/scroll-hint og ankerlenker nedover20 20, s-resize
last-nedNedlasting (PDF, presse-kit)20 20, copy
draDra-karusell og slider28 28, grab
dra-aktivMens man drar: pilene trekkes sammen og blir blekk28 28, grabbing
spillVideo: kvadratisk flis med trekant24 24, pointer
ikkeDeaktivert: grå pil med oransje strek7 7, not-allowed(03) K11 Pilnett
Pilene snur seg mot deg
Pilene innenfor 220 px dreier seg mot pekeren, blir oransje og vokser litt (fjær, ~60 fps, bare elementer i nærheten oppdateres). Klikk sender en bølge utover. Med redusert bevegelse skifter de bare farge.
[forslag] Bruk: hero-bakgrunn på /tjenester eller 404-siden, ikke på alle sider.
(04) Rundt segl
Seglet roterer med scrollen
Basisfart 18 s per runde. Scrollfart legges på som impuls og dempes (friksjon 0,92 per frame), og scroller du opp, roterer det baklengs. Ved hover går ringen raskere, og pila i midten skyver seg fram. Klikk fører til kontakt. Seglene er b02, b01 og b08 fra 2k.
Scroll videre: seglene akselererer.
(06) Strek-markør + Tromsø-klokke
Lenker med oransje strek
Tromsø 69°39′ N · --:--
(05) Kontakt
Klar for det neste?
Brødtekst på oransje bruker forslag A: ren svart (#000) på #C8501E, 4,62:1. Prøv å markere: blekk-blokk på oransje.