onscroll fader script
fade in / fade out effect als de pagina gescrolled wordt

home | index | menu | help

Er is geen CSS ondersteuning.

					
			

Als je de pagina een beetje naar beneden scrolled, moet je even naar de "bovenbalk" kijken. Die wordt gedeeltelijk transparant. Dit is het zogenaamde onscroll-fader effect. Onscroll is een nieuwe telg van de "html5-familie", maar je kan deze al jaren gebruiken in andere html-versies (zolang je maar dit script gebruikt). Ik zal eerst even een "groot plaatje" op het scherm zetten, zodat je beter het onscroll-effect kan bekijken.

					
			

onscroll

					
			

De procedure gaat als volgt. De pagina bestaat uit 2 gedeelten, die met de stylesheet zijn gedefinieerd. De div "vast" heeft een "fixed" positie en wordt met een onscroll-trigger half-tranparant gemaakt. De div "content" heeft een absolute positie en kan "onder" de div "vast" scrollen. De transparantie wordt "getriggerd" in de body-start-tag.

Om de onscroll-fader op jouw pagina('s) te zetten moet je de broncode van de onscroll-procedure op jouw web-ruimte zetten, en aanpassen tot een voor jouw werkbaar geheel. In het stukje javascript kan je de naam van de div's aanpassen en de fade-snelheid aanpassen met de 2 "setInterval's". De fader-procedure heeft, volgens JSLint, foutloos javascript, en het "onscroll-gebeuren" is verder foutloos voor wat betreft de CSS en de HTML5.

			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			

cache 30-06-2010