Bloem en water
Meer zit er niet in het deeg.
Nog acht
Andere technieken dan op de eerste pagina, allemaal op hun eigen beeld. Weer met erbij wat elke beweging kost en waar hij misgaat.
Alles is CSS en een klein beetje JavaScript, alles stopt bij “minder beweging”, en niets hangt af van een bibliotheek.
09
Kaarten die op elkaar stapelen
Elke kaart blijft plakken en de volgende schuift eroverheen. Werkt als je drie of vier dingen op volgorde wilt vertellen.
Kost: de sectie moet zo hoog zijn als het aantal kaarten bij elkaar.
Let op: bij meer dan vier wordt het scrollen naar de voettekst een reis.
Rusten
Het deeg krijgt tijd voordat het de plaat op gaat.
Bakken
Kort op een hete plaat, direct daarna koelen.
Verpakt
Luchtdicht, dezelfde dag nog onderweg.
10
Woorden die één voor één opkomen
De kop verschijnt woord voor woord in plaats van in één keer. Geeft gewicht aan een zin die het waard is.
Kost: niets, het zijn losse spans.
Let op: een schermlezer moet de zin gewoon in één keer lezen, dus opdelen mag alleen visueel.
11
Cijfer dat optelt
Het getal loopt op zodra het in beeld komt. Maakt van een cijfer een gebeurtenis.
Kost: vrijwel niets, het is één keer aftellen.
Let op: het echte getal moet in de HTML staan, anders leest een schermlezer nul. En één keer is genoeg; blijven herhalen is irritant.
100.000yufka per dag
10EU-landen
18mensen
12
Knop die naar je toe komt
De knop beweegt licht mee met de muis als je in de buurt komt. Kleine moeite, voelt duur.
Kost: één transform per beweging van de muis.
Let op: hooguit een paar pixels. Wordt het meer, dan mist iemand de knop bij het klikken en dat is het tegenovergestelde van behulpzaam.
13
Licht dat de foto vrijgeeft
De foto is donker tot je er met de muis overheen gaat. Nieuwsgierig makend, maar je verstopt wel iets.
Kost: een masker dat meebeweegt.
Let op: op een aanraakscherm is er geen muis, dus daar moet de foto gewoon zichtbaar zijn. Nooit gebruiken voor iets dat de bezoeker móet zien.
14
Achtergrond die van kleur wisselt
De ondergrond schuift langzaam van donker naar warm terwijl je door de sectie gaat. Onopvallend, maar je voelt dat je ergens anders bent.
Kost: één kleurwaarde die meeloopt.
Let op: de tekst moet op álle tussenstanden leesbaar blijven, niet alleen op begin en eind. Dat moet je nameten.
Van de plaat naar de doos
15
Lijn die zichzelf tekent
Een vorm wordt getekend terwijl je scrollt. Goed voor een route, een tijdlijn of een proces.
Kost: geen bestanden, het is één pad.
Let op: zonder JavaScript moet de lijn er gewoon helemaal staan.
16
Slepen dat terugveert
Pak het vel op en laat los. Het veert terug alsof er gewicht in zit. Sleep maar.
Kost: een kleine berekening per beeldje, alleen zolang je sleept.
Let op: dit is speelgoed. Leuk op één plek, vervelend als de hele site beweegt zodra je iets aanraakt.
Wat hiervan zou ik gebruiken
09 voor het verhaal van bloem tot doos, en 11 bij de cijfers — die twee vertellen iets. 10 mag op één kop, niet meer. De rest is plezier: aardig in een proeftuin, maar op een site voor groothandels leidt het af van bestellen.
Zeg de nummers en ik zet ze erin. Net als bij 5 en 7 bouw ik ze dan zo dat ze op een telefoon iets anders doen dan met een muis, want een magneetknop zonder muis is een knop die zomaar verspringt.