Hoe maak je simpele website animaties?

Men gebruikt CSS voor de vormgeving en javascript voor de animatie. Dit kun je vanaf de start zelf programmeren, of programmeren met behulp van handige javascript libraries.

Ben je niet van het programmeren, zijn op internet vaak wel knip en plak scriptjes te vinden. Bouw je een website in Wordpress, zou je de Visual Composer plug-in kunnen kopen voor wat basisanimaties. Daarnaast is het ook mogelijk om Adobe's Edge Animate of Muse te gebruiken. Deze kunnen ook animaties in de browser maken.

Flash is van oorsprong dé tool geweest voor animaties, maar wordt tegenwoordig slecht ondersteund. Zou ik zelf geen tijd en energie meer in steken.

Het voorbeeld dat je daar geeft is alles behalve een simpele web-animatie.
Het is opgebouwd uit cascading style sheets, html en javaScript (zie bron 1).

De moeilijkheidsgraad hangt samen met wat je wilt doen met een animatie.

Moet er een "knop" veranderen als je er met de muis boven hangt ? Zoek dan naar onmouseover events en functies. (zie bron 2)

Moet er iets gaan scrollen als je er met de muis boven hangt ? Zoek dan naar onmouseover events in combinatie met de functie "scroll" en "inline frame". (zie bron 3)

Wil je gewoon een soort animatiefilmpje laten spelen wanneer er met de muis overheen bewogen wordt, dan moet je de aanpassingen vooral zoeken in de "afbeelding" die je te zien krijgt bij onmouseover. Dat kan dan een gif zijn als je het simpel wilt houden, of een javascript dat de diverse afbeeldingen na elkaar afspeelt als je het aan kunt om ingewikkeld te worden ;-)

Veel succes ermee !

Toegevoegd na 9 minuten:
Zal nog even iets toevoegen zodat je kunt bekijken hoe zo'n gif-animatie dan gemaakt kan worden. Dus zie bron 4.

http://computertotaal.nl/apps-software/zo-doe-je-dat-een-gif-animatie-maken-62681