Animerte piksler (DRAFT)

2020-12-12

Innledning

Finn inspirasjon og lag logo

Skriv inn ønsket tekst, og søk etter pikselfonter: https://www.1001fonts.com/pixel-fonts.html?page=2&items=10

Sayso Chic.

Legg inn hver enkelt piksel i ditt favorittverktøy.

Eksporter som svg

Vil få en svg-fil der hver enkelt fil består av ett rektangel. Viktig for å få riktig effekt

viewbox.

Sett width og height, som et størrelsesforhold av viewbox

Legg til animasjon

Opacty 0 som startpunkt

Finn alle piksler.

Øk opacity til 1.

Legg til én og én piksel ved hjelp av setTimeout

Legg til pikslene i tilfeldig rekkefølge

Eyecandy

Ha varierende opacity på pikslene, for å gjøre effekten sterkere

Legg til CSS transisjon for en mykere overgang

Sluttresultat

Kodeeksempel