Geanimeerde achtergronden met canvas

Geanimeerde vectorachtergronden kunnen variatie toevoegen aan een weblandschap dat wordt gekenmerkt door foto's en video's op volledig scherm. Het zou mooi zijn als dit hand in hand zou gaan met laadtijden en brede hardware en software ondersteuning. Een oplossing is: canvas. Het HTML-element dat wordt bestuurd door JavaScript wordt ondersteund door alle huidige browsers en wordt met hoge prestaties gereproduceerd op mobiele apparaten.


De echte kracht zit hem in het feit dat het canvas alleen gevuld is met code - wat heel nieuwe mogelijkheden opent als mooi neveneffect: het gebruik van bijvoorbeeld recursieve functies, fractals of andere terugkerende elementen kan met weinig moeite worden gemaakt. Ik heb hier een kleine demo voorbereid hoe het geheel eruit kan zien:

Canvas Background by David Vielhuber

Canvas kan natuurlijk ook gebruikt worden in games, reclame, datavisualisatie of kunst. In tijden van 4k en continu schaalbare websites zit er naar mijn mening veel sluimerpotentieel in deze minder bekende technologie. In combinatie met statische SVG-elementen krijgen vectorgebaseerde afbeeldingen eindelijk het podium op het web dat ze altijd hebben verdiend.

Terug