Naar inhoud
FFrosthaven Lab

14 — 14 varianten

Micro-interacties

Cursors, tooltips, magnetics, scroll progress, confetti, theme toggle, accordions en modals.

Custom cursor

jsdesktop

Stip volgt direct, ring volgt met vertraging en groeit boven klikbare elementen. Verberg de systeemcursor alleen binnen het gebied, nooit op de hele site.

Magnetisch element

jshover

Het icoon trekt naar de cursor binnen een onzichtbare radius. Gebruik het op één plek, bijvoorbeeld de scroll-to-top of de hoofd-CTA.

Tooltip

cssa11y
Inclusief btwInclusief btw

Verschijnt bij hover én focus. Alleen hover is niet genoeg: toetsenbordgebruikers zien hem dan nooit. Nooit essentiële informatie in een tooltip zetten.

Scroll progress

jslong-form

Blok 1. Scroll dit paneel; de balk bovenaan volgt de voortgang.

Blok 2. Scroll dit paneel; de balk bovenaan volgt de voortgang.

Blok 3. Scroll dit paneel; de balk bovenaan volgt de voortgang.

Blok 4. Scroll dit paneel; de balk bovenaan volgt de voortgang.

Blok 5. Scroll dit paneel; de balk bovenaan volgt de voortgang.

Balk die de leesvoortgang toont. Waardevol bij blogartikelen en juridische pagina's; op een homepage van drie schermen is het overbodig.

Confetti

jsfeedback

Kort feestje na een succesvolle actie. Eén keer per sessie, na het versturen van een formulier of een geslaagde boeking. Vaker en het verliest betekenis.

Kopieer naar klembord

jscontact

E-mailadres of IBAN met één klik kopiëren. Het icoon wisselt naar een vinkje; laat het na anderhalve seconde terugspringen.

Theme toggle

cssstate

Maan en zon draaien in en uit terwijl de knop verschuift. Alleen bouwen als de site echt twee thema's heeft; een toggle die niets doet is erger dan geen toggle.

Avatar-stapel

csssocial proof
+42
tevreden eigenaren

Overlappende gezichten met een teller. Snelste manier om 'veel klanten' te suggereren zonder cijfers te claimen die je niet kunt onderbouwen.

Modal / dialog

jsa11y

Escape sluit, klik buiten sluit, role='dialog' met aria-modal. In productie ook de focus vasthouden binnen de dialoog, anders tabt de bezoeker eronder door.

Hover-kaart

css

Het project werd uitgevoerd door Miguel OrtegaMiguel OrtegaTechniek en installaties, sinds 2016 bij het team., onze technisch specialist.

Voorvertoning bij hover over een link of naam. Voor een teamlid, een project of een begrip in een tekst. Vertraging van ~200ms voorkomt geflikker.

Scroll-to-top

js

verschijnt na 50vh scroll

Verschijnt pas na een halve schermhoogte scrollen. Zonder die drempel staat hij meteen in beeld en dekt hij content af die je nog niet hebt gelezen.

Notificatiebadge

css

Cijfer met een pulserende ring erachter. Voor beheerschermen en berichtenmodules; op een marketingsite is er zelden iets te tellen.

Drag to reorder

jsbeheer
  • Tuinonderhoud
  • Zwembad
  • Schilderwerk

Lijst herschikken met de HTML5 drag-API, zonder library. Voor CMS-schermen waar de volgorde van diensten of foto's telt. Op touch werkt dit niet: bied daar pijltjes aan.

Toetsenbord-hints

a11y

Zoeken⌘K

SluitenEsc

VolgendeTab

Zichtbare kbd-labels bij sneltoetsen. Kleine moeite, en het is het enige signaal dat je site überhaupt toetsenbordbediening ondersteunt.