29/03/2013. jQuery is een JavaScript-bibliotheek die je kan integreren in je HTML-pagina. Om...

5
jQuery: gebruik van animaties in HTML 29/03/2013

Transcript of 29/03/2013. jQuery is een JavaScript-bibliotheek die je kan integreren in je HTML-pagina. Om...

Page 1: 29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.

jQuery: gebruik van animaties in HTML

29/03/2013

Page 2: 29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.

Wat is jQuery?jQuery is een JavaScript-bibliotheek die je kan

integreren in je HTML-pagina.

Om animaties te maken, die SEO-vriendelijk(er) zijn

Door gebruik te maken van “voorgedefinieerde scripts”

Page 3: 29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.

Hoe gebruik je jQuery?Wat heb je nodig?

Algemeen jQuery-script Specifiek jQuery-script Eventueel easing-script CSS-bestand HTML-code

Zoek op internet een jQuery-animatie die je wenst te gebruikenVb: http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

Kopieer de bestanden in jouw root-folder

Page 4: 29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.

Hoe doe je dit concreet? Kopieer de link naar het algemeen jQuery-

script in je head-tag:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></

script>

Maak (eventueel) een link naar het easing-script:

<script src="js/jquery.easing.1.3.js" type="text/javascript"></script> 

Maak een link naar de opmaak (het CSS-bestand)

vb: <link rel="stylesheet" href="animated-menu.css"/>  

Page 5: 29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.

Hoe doe je dit concreet? Maak een link naar het specifieke jQuery-

script voor jouw animatie (vb: <script src="animated-menu.js" type="text/javascript"></script>  )

Dupliceer de HTML-code

Pas de HTML-code en CSS aan, naar jouw wensen

Denk eraan dat de verwijzingen correct moeten zijn. In mijn voorbeeld staan de scripts in een folder “js” in mijn rootfolder…