Animeren met spritesheets

Animeren met spritesheets

Vorige week kreeg ik een interessante vraag: een achtergrond voor een website, met daar een minimale animatie over heen. Zeg maar zoiets:

 

gif animaties

De reden dat ik het interessant vond, was dat je gewoonlijk online werkt met video, of met gif animatie. Een video kan je automatisch laten afspelen (alleen op pc), maar is niet transparant. Een gif heeft wel transparantie, maar alleen 100% of 0%. Dit betekent dat de overgang van voorste animatie laag naar foto achtergrond nooit mooi vloeiend is, maar lelijke vierkante pixels gaat opleveren. Zoals hier:

Dus heb ik wat research gedaan. Ik kwam als snel op spritesheets. Bij games wordt natuurlijk bijna altijd met spritesheets gewerkt. Maar wist je dat je ook een spritesheet in een browser kan laten animeren? Er is een redelijk simpel scriptje voor.
Daarmee kwam ik op het volgende:

Veel mooier, toch?
Maar, je kan het scriptje ook gebruiken om buttons te animeren.
In landingpages wordt veel gezocht naar optimale kleuren, wat voor tekst te gebruiken, in wat voor vorm en welke informatie gegeven moet worden. Natuurlijk wordt aangeraden om een animatie of op zijn minst een video op zo een pagina toe te voegen.

Maar over de mogelijkheden van beweging heb ik nog maar weinig gevonden. Niks grijpt de aandacht zoals beweging; ga maar bij jezelf na als je zit te werken, en er vliegt iets voorbij net in je gezichtsveld. We zijn misschien niet zo erg als katten die meteen een dodensprong naar elke passerende vlieg maken, maar jachtinstinct is er zeker wel.

Ik zou graag verdere research doen naar bewegende buttons. Ook met bijvoorbeeld mouse-over options. Ik kan mij voorstellen dat ook hier geld ‘less is more’. Zo zou ik maar een bewegend element tegelijk in beeld willen hebben. Maar als dit soort ideeën zouden eigenlijk getest moeten worden.

Heb jij interesse om met mij de opties van een bewegende button te testen? Neem dan contact met mij op.

No Comments Yet.

Leave a comment