Een vliegreis over de wolken

Hier bij Bonnevoy houden we van mooie dingen en we zijn goed in programmeren. Voor onze ‘coming soon’ pagina hebben we daarom geprobeerd iets moois te programmeren, waar je naar kunt kijken tijdens het wachten (niet letterlijk, want zo coming soon zijn we ook weer niet). Als je de pagina hebt bekeken zul je weten dat ik de animatie met de wolkjes bedoel, zo niet: bekijk hem dan nog even snel.

Animaties op websites bestaan al heel lang, maar tegenwoordig zijn er verschillende technieken bijgekomen om geavanceerdere animaties te maken zonder dat je hiervoor bijvoorbeeld een Flash plugin voor hoeft te installeren. Het voordeel van deze technieken is dat het in theorie op alle apparaten met internet zou moeten werken (dus ook op je iPad). Het nadeel is dat het nieuw is en hierdoor niet werkt op oude apparaten of software die vandaag nog wel steeds worden gebruikt.

Vele wegen leiden naar Rome en zo zijn er ook verschillende manieren om de wolkjes animatie op te bouwen. Om onze coming soon pagina voor zoveel mogelijk mensen leuk te maken hebben we de nieuwe animatietechnieken eens getest op vloeiendheid en compatibiliteit. Een kijkje in de keuken van Bonnevoy (pas op: turbo-, geek- en nerd-taal vanaf hier).

De 3 verschillende methoden die zijn getest zijn (1) de jQuery animate functie met afzonderlijke elementen per wolk, (2) een CSS3 keyframe animation en (3) een 2D animatie met HTML5 canvas. De animatie bestaat uit willekeurig geplaatste wolken (24-bit PNG’s) die met een lineaire snelheidsfunctie naar de onderkant en zijkant van het scherm ‘drijven’. Tegelijkertijd wordt de afmeting van de wolk vergroot en neemt de ondoorzichtigheid (opacity) toe.

De jQuery methode is het meest compatibel met verschillende browsers. De enige afhankelijkheid is Javascript, 24-bit PNG’s  en een vorm van CSS opacity. De enige afvaller hierbij is Internet Explorer 6. De keerzijde is dat deze methode ook de slechtste performance heeft van de drie. De animatie kan geen gebruik maken van hardware acceleratie en wat oudere browsers hebben al snel moeite met de transparantie en het vele javascript.

De CSS3 keyframe animatie is de nieuwste vorm van animeren en heeft veel potentie. Standaard gebruiken deze animaties hardware acceleratie en dit is terug te zien in de mooie vloeiende beweging. Daarnaast is deze methode ook in erg weinig regels te programmeren. Het grootste nadeel is dat het op dit moment alleen werkt in Webkit browsers, wat neerkomt op Chrome en Safari. Met gezamenlijk 20% marktaandeel is dat nog niet zoveel.

De laatste methode is een 2D canvas animatie. Deze nieuwe HTML5 methode wordt door de laatste versies van alle grote browsers ondersteund en in veel gevallen ook met hardware acceleratie. De methode is Javascript intensief, maar de performance is in de meeste gevallen goed. Op de ‘coming soon’ pagina hebben we daarnaast een systeem ingebouwd om het aantal wolken te beperken in het geval er toch slechte performance blijkt. Helaas heeft Internet Explorer pas vanaf versie 9 ondersteuning voor canvas, dus bezoekers met Internet Explorer 8 of lager serveren we een statische afbeelding van de wolken. Canvas is duidelijk de methode om animaties zonder Flash weer te geven tegenwoordig. Daarnaast gaan we in de toekomst CSS3 animaties zien voor eenvoudige en snel te implementeren effecten.