WAT IS WEBANIMATIE 2

In de cursus Webanimatie 2 (of scripting) richten we ons vooral op jQuery, dé animatiescriptingtaal van het web!

jQuery is een JavaScript-bibliotheek, waarmee je op een erg efficiente manier animaties kan programmeren.

Wij bekijken de basis van deze taal, zodat je zélf kan programmeren, fotosliders en geanimeerde navigaties kan creeeren.

Tegen het einde van de cursus kan je zelf een volledige website programmeren, met stijlvolle animaties en gebruiksvriendelijke interfaces.

GEWENSTE VOORKENNIS

LINKS

de Nederlandstalige cursus kan je hier downloaden (voor TKO-cursisten). Indien u deze cursus ook wenst te downloaden, contacteer me dan via het hoofdmenu

 

• cursus jQuery
• PowerPoint met inleiding jQuery

enkele interessante links naar jQuery-bronnen:

• W3 schools
• link naar jQuery CDN
• link naar jQuery UI CDN


• overzicht van alle event methods
• overzicht van alle effect methods
• overzicht van alle html/css methods

enkele andere interessante links:

• (Engelstalige) handleiding in FLEXBOX
• flexbox op W3schools
• flexbox froggy: leer spelenderwijs flexbox kennen

De fotogalerij uit de les namaken?

in de les hebben we via script foto's op een pagina geplaatst, en deze via "lightbox" vergroot weergegeven. Je vindt hier alle informatie over terug op de website van Lokesh Dhakar. Om dit ook na te maken, heb je volgende zaken nodig:

• je gebruikt zijn HTML-code: <a href="img/foto1.jpg" data-lightbox="mijnfotos"><img src="img/foto1.jpg" class="foto"></a>waarbij "img/foto1.jpg" uiteraard het pad is naar jouw foto's
• in jouw head-tag plaats je de link naar zijn css-file (hier de CDN-versie): <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css">
• je plaats onderaan de link naar zijn jquery (eveneens de CDN-versie):<script src="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.min.js"></script>