Wat er nog meer kan
Hieronder acht manieren om beeld te laten bewegen, allemaal gebouwd op de foto’s die er al zijn. Bij elke staat wat hij kost en waar hij misgaat, want dat is meestal belangrijker dan hoe hij eruitziet.
Alles is gemaakt met CSS en een klein beetje JavaScript. Geen bibliotheken, niets dat later stukgaat bij een update. Alles stopt zodra het besturingssysteem om minder beweging vraagt.
Stapel die uit elkaar valt
Wat er nu op de site staat. Vier vellen schuiven bij het scrollen los van elkaar.
Kost: vier beelden, samen 268 kB. Draait op 60 fps.
Let op: de vellen zijn bleek, dus tekst eroverheen moet gedempt worden.
Kantelen onder de muis
Het beeld draait mee met waar je wijst, alsof je het vel in je hand houdt. Beweeg de muis over de foto.
Kost: niets extra, alleen een transform.
Let op: op een telefoon is er geen muis. Daar moet het net zo goed staan zonder.
Draaiende stapel
Vier vellen op een ring die langzaam ronddraait. Werkt goed als je meerdere producten naast elkaar wilt tonen.
Kost: een animatie die altijd doorloopt, dus hij blijft de grafische kaart aanspreken.
Let op: alleen doen als er iets te zien valt op alle vier de kanten.
Beeld door de letters heen
De foto is alleen zichtbaar binnen de vorm van de tekst. Sterk voor één kop, niet voor een hele pagina.
Kost: geen extra bestanden.
Let op: een schermlezer leest gewoon de tekst, dus dat is in orde. Wel altijd een terugvalkleur zetten voor browsers die het niet kennen.
YUFKA
Onthullen bij het scrollen
Het beeld komt tevoorschijn achter een rand die meeloopt met hoe ver je bent.
Kost: niets, het is één eigenschap die meebeweegt.
Let op: zonder JavaScript moet het beeld gewoon helemaal zichtbaar zijn, niet half.
Diepte in lagen
Voorgrond en achtergrond bewegen op verschillende snelheid. Geeft ruimte zonder dat er iets te zien is dat er niet is.
Kost: per laag een transform.
Let op: te veel verschil maakt mensen misselijk. Houd het klein.
Band die meeschuift
Een rij producten die horizontaal beweegt terwijl je verticaal scrollt. Toont meer in minder hoogte.
Kost: weinig, maar de sectie moet hoog zijn om ruimte te hebben.
Let op: op een telefoon voelt het snel als een fout. Daar liever gewoon onder elkaar.
Boogvorm
Geen beweging maar een vorm. Een boog haalt het rechthoekige uit een foto en past bij een ambachtelijk merk.
Kost: niets.
Let op: er verdwijnt beeld in de hoeken, dus het onderwerp moet in het midden staan.
Wat ik zou kiezen
Voor deze site: 01 voor de cijfers, 05 bij de sac, en 08 voor de producten. Die drie dragen iets bij aan het verhaal. De rest is mooi maar zegt niets, en dan is stil beeld beter.
Zeg welke nummers je wilt, dan zet ik die in de echte site. Alles hier draait op hun eigen foto’s, dus er hoeft niets nieuws gemaakt te worden.