image transition / circle in
plaatjes overgang met een circle-in transition

home | index | menu | help

Er is geen CSS ondersteuning.


















		
		
		

Voor het circle-in effect moet je even de broncode van deze transition naar jouw webruimte kopieren. In de body heb ik, om het voorbeeld een beetje te vullen, drie plaatjes neer-gezet. Plaatjes moeten altijd een hoogte en een breedte in de img-tag hebben (anders worden de validators "boos"), maar deze plaatjes moeten ook nog een id hebben (op deze pagina img1, img2 en img3). Als je meer plaatjes hebt, ga je gewoon verder met img4, img5 enz. enz. In het javascript bij de "function loaded" vind je de "img"-verwijzingen terug. Kopieer voor elk nieuw plaatje de 2 regels met de "push". Zoals je ziet kan je daar links toewijzen aan de plaatjes. Boven in het script kan je de positie en de afmetingen van de "show" aangeven. De plaatjes die je het circle-in effect wilt geven moeten allemaal dezelfde afmeting hebben (anders is het werkelijk geen gezicht...). Voor de rest is er alleen nog maar te melden dat het javascript, volgens de strenge JSLint-norm, foutloos is en dat de pagina op alle fronten valideert.

cache 17-05-2012