Mini animaties op je website

door 25 02 2016Wordpress tips0 Reacties

Als je denkt: aan mijn website geen toeters en bellen, dan wil je waarschijnlijk ook geen bewegende onderdelen. Toch vond ik op websites, bekroond door AWWWARD, en met de tag ‘minimal’ veel animaties. Website animaties zijn soms subtiel, meestal functioneel, maar trekken altijd de aandacht.

 

Apart

Lang niet zo irritant als dit appeltje is bijvoorbeeld de subtiele tekstovergang op de Franse website FAKEMUSIC. Hier wordt bij het schuiven of klikken naar een volgend muziekalbum de titel van de plaat als een soort Luxaflex vervangen. En als je over linkjes heen ‘hovert’ komt er een streep doorheen of het woord schuift naar rechts. Apart, maar het prikkelt in ieder geval wel.

 

Functioneel

Op de minimalistische site van grafisch ontwerpbureau DEADWATER zie je veel beweging. Klinkt dat tegenstrijdig: minimalistisch en bewegend? In eerste instantie misschien wel, maar minimalistisch design houdt in: vorm volgt functie. Dus als de functie is dat een bezoeker een tekst leest, waarom zet je daar dan geen beweging achter van links naar rechts. Op deze site weet je precies waar je moet kijken, want je wordt gestuurd door de animaties.

 

Toepassingen

Ik ben geen design expert, maar wat ik heb gezien is dat animaties grappig, functioneel en/of mooi kunnen zijn. Enkele toepassingen:

  • tekst die groter wordt of van kleur verandert als je eroverheen beweegt → misschien ga je er dan wel eerder op klikken?
  • een foto of tekst die langzaam zichtbaar wordt of tevoorschijn komt → een beetje nieuwsgierige bezoeker moet wel blijven kijken… Hiermee kun je de kijker bovendien sturen in welke volgorder hij/zij je website bekijkt. (Deadwater)
  • foto’s die in verschillende tempo’s wisselen als je naar beneden scrollt → ook dat trekt enorm de aandacht (Chpt3)
  • een actiebutton die ronddraait 😉 (actiebutton)

 

Omdat ik zelf nieuwsgierig werd hoe ik animaties in css kan schrijven, heb ik deze pagina gemaakt: APPELTJE VOOR DE DORST

 

Wil je zelf animaties op je website en ben je handig met css? Kijk dan op https://robots.thoughtbot.com/css-animation-for-beginners voor de basisprincipes.

 

En dan deze prachtige websites… kijk zelf maar wat beweging kan doen:

http://www.veintidosgrados.com/

https://bonnemarque.se/

http://www.chpt3.com/home

wordpress hulplijn leidsche rijn

Heb je hulp nodig met je website?