Nieuwe webanimatie met Squigglevision

Flash-animatie is gelukkig verleden tijd. En maar goed ook. Al durven sommige bedrijven er toch nog mee werken op hun website. Maar Flash, en ook Java, vertragen de laadsnelheid van je website enorm. En je bezoekers hebben echt geen geduld meer.

Maar technologie evolueert.

Browsers zoals Google, Firefox, Internet Explorer (nu vervangen door Edge) schaffen verouderde technologie snel af. Ze gaan steeds sneller mee met de tijd. En dat is ook wat je als bedrijf moet doen met je website.

Nu kunnen we ‘visuals’, animaties en interactieve elementen maken waarvoor we vroeger enkel lompe technologie voor hadden. Zo zorg je voor vernieuwende designs op je website die je bezoekers echt aanspreken.

Die vernieuwende designs werken zowel op desktop als op mobiel. Met net dat tikkeltje extra. En daarmee laten we je er graag kennismaken.

Webanimatie is nu overal, bijna elke webadvertentie, pagina, webtoepassing of software die in een browser wordt uitgevoerd, bevat een of andere vorm van webanimatie. Sommige daarvan zijn vrij subtiel, andere zijn dan weer erg ingewikkeld. Maar dat was niet altijd zo.

Voordat we online animaties konden maken, waren websites gewone documenten die alleen verbinding konden maken met andere documenten. De eerste website ooit bevatte niet eens CSS.

Het ‘Graphics Interchange Format’, vooral bekend onder de afkorting GIF, werd in 1987 geïntroduceerd door CompuServe. Dit werd toen voornamelijk toegepast om bedrijven de mogelijkheid te geven hun logo's te verbeteren door ze 360 ​​graden te draaien.

Maar sinds de introductie van de GIF, bleef webanimatie gedurende 10 jaar op dezelfde manier gebeuren.

Eind jaren negentig ontwikkelde Adobe zijn Flash webanimatie en het volledige web werd een animatieparadijs.

Adobe Flash werd onder andere gebruikt in online animaties, rijke internetwebsites, desktop-apps en games. Maar na de ondergang van Flash, voordat CSS en CSS3 werden uitgebracht, werd het internet weer een statische plek; niet-geanimeerd of semi-geanimeerd met GIF's.

De laatste jaren is JavaScript steeds meer de technologie bij uitstek geworden, vooral voor het maken van brede en complexe webanimaties.

Door CSS-overgangen, CSS-keyframes, JavaScript-animaties of een combinatie hiervan te gebruiken wordt tegenwoordig beweging op het web bereikt. Dus als je een geweldige animatie op een website, web advertentie of een ander webgebaseerd product ziet, kijk je waarschijnlijk naar een animatie die is gemaakt met een van deze drie technologieën.

SVG is de afkorting van ‘scalable vector graphics’. SVG’s zijn vector afbeeldingen die je kunt aanpassen aan elke beeldschermgrootte zonder dat de grafische kwaliteit ervan verloren gaat. Dit kan gaan om een bedrijfslogo, een icoon, maar ook om een animatie.

Van JPG-bestanden heb je vast wel eens gehoord, maar de kans is groot dat SVG-bestanden nieuw voor je zijn. Voor ons een goede reden om daar meer over te vertellen, want SVG kent voordelen voor iedere ondernemer met een website.

Scalable Vector Graphics zijn vectoren in plaats van pixels, waardoor de laadtijd direct drastisch wordt verminderd.

Vectoren werken met wiskundige berekeningen om te bepalen waar een bepaalde lijn, cirkel of object staat ten opzichte van een vlak (grid). Doordat die berekeningen eigenlijk niets meer dan tekst (code) zijn, zal een browser veel sneller overweg kunnen met een vector-bestand dan met een gewone afbeelding (zoals JPEG, PNG).

Terwijl een afbeelding gebaseerd op pixels ‘vast’ is en hooguit met CSS in grootte en plaatsing op de pagina is te manipuleren, is SVG volledig aanpasbaar met CSS.

Ideaal voor iconen of elementen in interfaces die een responsive design hebben, waarbij op het ene scherm een andere grootte getoond moet worden dan op het andere (mobiele) scherm. Toch moet er ook meteen bij worden gezegd dat SVG nog zeker geen vervanging kan zijn voor pixel-afbeeldingen. De graphics die je met SVG kunt bereiken zijn vaak eenvoudig en in een ‘tekenstijl’ die niet in de buurt komen van een gedetailleerde foto.

Ideaal voor iconen, logo’s,... maar je kunt gerust verder gaan dan dat.

Squigglevision is een oude animatie stijl waarbij de lijnen van een getekend object bewegen terwijl de rest van de afbeelding stil staat.

En je kan nog een stap verder gaan door de kleur van je logo te laten veranderen zodra je verder scrolt op de pagina en een vlak met een andere kleur tegenkomt.

Dit creëert een beetje het effect van dat de logo onder water verdwijnt. Het is iets miniem, maar het leek ons een leuk idee om daar iets extra aan te geven. Hoewel het effect van de Squigglevision niet op alle browsers even goed ondersteund wordt kan je met behulp van een paar fallbacks toch een leuk effect creëren en zo je website op een leuke en subtiele manier opfleuren.

Wil je graag wat meer informatie over een design offerte, of ontdek je graag de mogelijkheden voor jouw website? Contacteer ons dan gerust via info@entityone.be