26 juni 2015

Met animaties de presentatie van je content finetunen

development

Een website ontwerp voor een nieuwe klant dat, qua opzet, vrij eenvoudig om te zetten lijkt naar een dynamische site. Schijn bedriegt! Tonen, onzichtbaar maken, verplaatsen, verspringen. Het kost veel meer tijd dan het lijkt om het goed uit te voeren. Arjen, front-end expert bij W3S, gebruikt parallax scrolling technieken en deelt zijn ideeën graag!

Dynamische elementen en parallax scrolling

Tegenwoordig zie je steeds meer websites of apps, waarbij verschillende elementen ten opzichte van elkaar bewegen. Dat biedt een aantal grote voordelen:

  • Kostbare schermruimte beter benutten, omdat je bijvoorbeeld de navigatie verkleint
  • Controle over de timing van vertoningen. Onderdelen later laat verschijnen zodat de aandacht van de gebruiker wordt getrokken op het moment dat jij dat wilt
  • Aandacht trekken. Met verschillende soorten beweging iets laten opvallen

Een nadeel is, is dat er vaak ontzettend veel tijd in gaat zitten om dit perfect uit te voeren. Ik ben er in gedoken en nadat ik een aantal parallax scrolling technieken heb bestudeerd, heb ik een paar van de principes kunnen nabootsen met met wat eenvoudige Javascript en CSS3 transities. 

Case

Terug naar het webproject met geanimeerde elementen, waar in de inleiding over gesproken wordt. Welke animatie moet er worden toegepast en hoe wordt dit toegepast? Het statische ontwerp van de website bestaat uit het volgende wireframe.

De volgende animatie moet worden toegepast binnen de website:

  1. De navigatiebalk wordt kleiner wanneer je naar beneden scrolt, zodat er meer schermruimte overblijft. Het logo in de navigatiebalk schaalt naar een kleiner formaat en de bijbehorende tekst wordt weggelaten, omdat deze bij het schalen anders onleesbaar wordt.
  2. De drie afbeeldingen in blok 1 worden getoond wanneer blok 1 prominent in beeld is, zodat deze meer aandacht ontvangen.
  3. De website krijgt nét dat beetje extra, door de elementen niet op een voorspelbare manier te laten bewegen maar deze een eigen stijl mee te geven.

Definieer de elementen in de website, die een belangrijke rol spelen bij het toepassen van de animatie. In deze case zijn dat de volgende elementen:

  • De navigatiebalk, met het logo en de tekst in een aparte JPEG
  • Blok 1, met daarbinnen drie afbeeldingen
  • Blok 2
  • Blok 3, waar blok 1 en 2 bovenop liggen

Het principe

Om te beginnen plaatsen we de elementen allemaal ‘fixed’ op de pagina. Een voordeel is dat we dit ook in percentages kunnen uitdrukken, zodat je wat minder van een vast schermformaat afhankelijk bent.

De truc is nu om een ‘onzichtbaar’ element zichtbaar te maken waar en wanneer wij dat willen. Bijvoorbeeld op een bepaalde scrollpositie. Het is handig om hierbij rekening te houden met properties die geanimeerd kunnen worden met CSS3 transities.

1. Navigatiebalk

Om te beginnen, neem ik eerst de navigatiebalk, zie een voorbeeld hieronder:

 

Ik ken met Javascript, afhankelijk van de window.scroll positie, een klasse toe aan de elementen. Daarin staat welke properties veranderd moeten worden. In dit geval zijn dat dus de hoogte van de eerste afbeeldingen en de opacity van het tweede plaatje.

2. Plaatjes in blok1 pas later tonen

We voegen nu de blokken 1 en 2 ook toe, samen met de plaatjes in de HTML. In de Javascript komt daar nog een aantal if-statements bij om bij andere scrollposities nieuwe classes toe te kennen aan de blokken 1 en 2 en de plaatjes in blok 1. In deze classes bepalen we de nieuwe posities voor de blokken, de plaatjes en de opacity van de plaatjes. Het is allemaal wat duidelijker als je zelf met het voorbeeld hieronder speelt:

 

Icing on the cake

Door met de verschillende posities uit te proberen, kan je de feel van de site finetunen naar wat het beste past bij de content. Denk hierbij aan het toepassen van verschillende soorten timing functies (zie ook: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp) om het gedrag van de verschillende objecten beter op elkaar af te stemmen. Je zou deze functies eventueel ook zelf kunnen maken om nog meer controle te krijgen (zie bijvoorbeeld: http://cubic-bezier.com/#.48,.68,.66,.03).

Vragen of benieuwd naar mogelijkheden van animatie in jouw website?

We staan klaar om je vragen te beantwoorden of je verder op weg te helpen. Stuur ons een e-mail of bel ons.

Geschreven door: Arjen
Cookies?

We gebruiken cookies om het functioneren van onze website te verbeteren. De gegevens worden volledig anoniem verzameld.