Hoe maak je simpele website animaties?

Bij sommige websites zie je dat bijvoorbeeld een pijltje van boven naar beneden beweegt en dat soort effecten. En bijvoorbeeld op deze website
Bewegen er allemaal dingen als je naar beneden scrolt.

http://themeforest.net/item/doors-onepage-corporate-multipurpose-template/full_screen_preview/8638508

Maak je css3 keyframes of met javacript, zoja hoe kun je dit het beste leren?

Weet jij het antwoord?

/2500

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

Bronnen:
http://maps.gstatic.com/cat_js/maps-api-v3...
http://www.w3schools.com/js/js_events.asp
http://www.w3schools.com/tags/att_iframe_s...

Stel zelf een vraag

Ben je op zoek naar het antwoord die ene vraag die je misschien al tijden achtervolgt?

/100