ScrollY gebruiken als input voor Javascript

Sinds Html5 wordt in veel websites gebruik gemaakt van het scrollen om elementen in de pagina aan te sturen. Bijvoorbeeld een element dat met een fade-in verschijnt als de gebruiker de pagina naar beneden scrollt. Voor dit effect wordt Javascript gebruikt die afhankelijk van de scrollhoogte opdrachten uitvoert. Met deze techniek kunnen heel ingewikkelde effecten gemaakt worden die het ontwerp van je website echt verrijken. In dit voorbeeld kijken we naar een eenvoudige manier om Javascript met de scrollbalk te laten samenwerken. Deze manier heeft zijn beperkingen, maar is eenvoudig te begrijpen en heel geschikt om mee te beginnen.

Stap 1. Allereerst hebben we een html-document nodig met de script-tag in de body. Voor dit voorbeeld hebben we een scrollbalk nodig, dus laten we beginnen met de body groter te maken dan het browser venster. Hiervoor gebruiken we css. Om een element een hoogte in procenten te geven is het noodzakelijk de hoogte eerst bij ‘html’ te benoemen. In dit voorbeeld benoemen we de hoogte in 1 keer voor html en de body-tag tegelijk.

<head>
<style>
html, body
{
height:200%;
}
</style>
</head>

<body>
<script type=”text/javascript”>
</script>
</body>

Stap 2. We gaan in dit voorbeeld Javascript een eenvoudige p-tag laten beïnvloeden door de scrollBalk. Om te beginnen plaatsen we een p-tag in de body. Omdat we deze p-tag willen beïnvloeden met Javascript geven we meteen een id attribuut met de naam ‘tekst’. Vervolgens laten we Javascript in het document zoeken naar de p-tag met id ‘tekst’.

<body>
<p id=”tekst”></p>

<script type=”text/javascript”>
var tekst=document.getElementById(“tekst”);
</script>
</body>

Stap 3. Om de scrollbalk te gebruiken is het handig om te zien welke informatie de scrollbalk doorgeeft. In dit voorbeeld gebruiken we de waarde van ‘scrollY’. Als het html-document geopend wordt heeft de scrollY standaard de waarde 0; De bovenkant van de website is in beeld. Als de gebruiker scrollt verschuift de scrollbalk tegelijk met de website. Laten we er eerst voor zorgen dat we te zien krijgen welke waarde de scrollbalk doorgeeft als er gescrollt wordt. Hiervoor maken we een variabel met de naam ‘scrollY’. Die waarde  verandert bij het scrollen. Daarom geven we Javascript de opdracht zelf op zoek te gaan naar de waarde van scrollY. Om de waarde van ‘scrollY’ zelf te kunnen zien plaatsen we die in p-tag ‘tekst’ met behulp van de Javascript eigenschap ‘innerHTML’. Let op, de variabele naam “ScrollY” mag niet hetzelfde geschreven worden als de waarde “scrollY”!

<script type=”text/javascript”>
var tekst=document.getElementById(“tekst”);
var scrolly=window.scrollY;

tekst.innerHTML=scrolly;
</script>

Stap 4. Bij het openen van het html-document wordt de waarde van scrollY in ‘tekst’ gezet. Scroll door de pagina en ververs het browservenster. Als ‘tekst’ nog in beeld is zul je zien dat er een andere waarde verschijnt. We gaan een paar aanpassingen doen zodat ‘tekst’ mooi in beeld blijft en we meteen bij het scrollen de waarde zien veranderen. Als Javascript merkt dat het html-document naar boven gescrollt wordt, laten we Javascript ‘tekst’ met het zelfde aantal pixels naar beneden plaatsen. Hierdoor lijkt het alsof ‘tekst’ blijft staan. Om dat te doen moet eerst de positie van ‘tekst’ ingesteld worden.

<style>
html, body
{
height:200%;
}
p#tekst
{
     position:absolute;
     top:0px;
     left:0px;
}
</style>

Vervolgens geven we Javascript de opdracht om iedere keer als er gescrollt wordt de functie ‘scrollen()’ uit te voeren. Dat is een functie die we zelf bedenken, en dus ook zelf moeten beschrijven. De functie ‘scrollen()’ doet 3 dingen: 1. De waarde van variabele ‘scrolly’ wordt bijgewerkt, 2. De waarde van variabele ‘scrolly’ wordt in ‘tekst’ geplaatst en 3. de css-top waarde van ‘tekst’ wordt aangepast. Omdat de waarde van ‘scrolly’ alleen een getal is, en css naast de waarde ook de eenheid moet weten, moet bij de nieuwe css-top waarde van Javascript de eenheid (+”px”) worden toegevoegd.

<script type=”text/javascript”>
var tekst=document.getElementById(“tekst”);
var scrolly=window.scrollY;

window.onscroll=scrollen;

function scrollen()
{
     scrolly=window.scrollY;
     tekst.innerHTML=scrolly;
     tekst.style.top=scrolly +”px”;
}

</script>

Stap 5. De laatste stap van dit voorbeeld. We zien dat de waarde van ‘scrolly’ hoger en lager wordt bij het heen en weer scrollen. Deze waarde gebruiken we nu om ‘tekst’ in beeld te houden, maar we kunnen natuurlijk meer css eigenschappen beïnvloeden. Bijvoorbeeld de opacity. Als de waarde van ‘scrolly’ laag is, maken we de opacity van ‘tekst’ laag. Als de waarde van ‘scrolly’ hoger wordt, wordt de opacity van ‘tekst’ hoger. De waarde van ‘scrolly’ kan behoorlijk groot worden in vergelijking met de waarde van opacity, die mag variëren van 0 tot 1. Om een mooi fade-effect te krijgen delen we de waarde van ‘scrolly’ daarom door een groot getal. In dit voorbeeld door 200.

<script type=”text/javascript”>
var tekst=document.getElementById(“tekst”);
var scrolly=window.scrollY;

window.onscroll=scrollen;

function scrollen()
{
scrolly=window.scrollY;
tekst.innerHTML=scrolly;
tekst.style.top=scrolly +”px”;
tekst.style.opacity=scrolly/200;
}

</script>

 

Leave a Reply

Your email address will not be published.