Duurzaamheid

september 2014 - oktober 2014

Ter promotie van het duurzame karakter van de Wijzonol en RalstonColour verven, werd er door Triggerfish! een aantrekkelijke pagina gebouwd met diverse fraaie animaties erin, hierin mocht ik een steentje bijdragen tijdens mijn stage. De uiteindelijke pagina voor Wijzonol kunt u hier terugvinden, de pagina voor RalstonColour vindt u hier.

Gebruikte technieken: HTML5, CSS3, SASS, TimelineLite, TweenLite, jQuery, SVG

Over de pagina

De duurzaamheidspagina was het eerste "grote" project waar ik in mee mocht draaien tijdens mijn stage bij Triggerfish!. De deadline was erg krap en er werd dan ook veel van mij verwacht. De pagina animaties zijn opgebouwd met behulp van TimelineLite, TweenLite en SVG animaties, deze technieken waren allemaal helemaal nieuw voor mij en een flinke portie research was dan ook nodig. De pagina is responsive alhoewel de animaties op mobiele devices worden uitgeschakeld, deze worden dan vervangen door afbeeldingen. Uiteindelijke is de pagina zeer goed uit de verf gekomen en was de klant er zeer tevreden over, ook ik zelf ben nog steeds erg tevreden over deze pagina en op het moment van schrijven staat deze pagina hoog op het lijstje van producten waar ik trots op ben.

Mijn taak

De pagina heb ik gebouwd samen met één van de vaste Front-end medewerkers, de pagina werd verdeeld in blokken en wij kregen ieder een portie animaties die gemaakt moesten worden. Aan mij werden de transport animaties en de proces animaties toegewezen. Vooral de proces animaties kostten erg veel tijd doordat deze gedaan moesten worden met behulp van SVG om het beoogde effect te behalen. Aangezien noch de vaste medewerker noch ikzelf ooit met SVG animaties had gewerkt, ging hier een flinke portie research in zitten. Uiteindelijk bleek het een zeer steile leercurve te zijn, maar toen ik het één keer door had, waren de andere SVG animaties niet veel werk meer. Naast de hiervoor genoemde animaties, heb ik ook veel getest en veel kleine issues opgelost na de oplevering. Ook heb ik het grootste gedeelte van de navigatie aan de zijkant van het scherm gebouwd en geanimeerd, dit alles uiteraard onder goede begeleiding van de vaste medewerker(s).

Fotogalerij

Hier onder vindt u een fotogalerij met screenshots van de pagina´s.

  • duurzaamheidspagina duurzaam duurzaamheid
  • duurzaamheidspagina duurzaam duurzaamheid
  • duurzaamheidspagina duurzaam duurzaamheid
  • duurzaamheidspagina duurzaam duurzaamheid
  • duurzaamheidspagina duurzaam duurzaamheid
  • duurzaamheidspagina duurzaam duurzaamheid
  • duurzaamheidspagina duurzaam duurzaamheid

Contact

*Verplichte velden