Categorie archief: persoonlijk

Virtual reality in het onderwijs

“Het klaslokaal is nog niet klaar voor virtual reality”

In 2014 kocht Facebook de Oculus Rift, “de leider in Virtual Reality (VR) techniek” (Zuckerberg, 2014). Oculus Rift maakt Head Mounted Displays (HMD), een bril met ingebouwde schermen die de gebruiker op zijn hoofd kan zetten. Zo lijkt het alsof de gebruiker zich in een virtuele wereld bevindt. Mark Zuckerburg, eigenaar van Facebook, noemt in zijn aankondiging ook het leren in een klaslokaal met studenten en docenten uit de hele wereld. (Zuckerberg, 2014) En na die overname vertelde Palmer Luckey, de oprichter van Oculus Rift, in een e-mail dat de overweging werd gemaakt om gratis HMD’s naar lesinstituten te sturen (Lamb, 2014). De twee bedrijven lijken dus bezig te zijn om VR naar het onderwijs te brengen. Maar er is één probleem; het onderwijs zelf is nog niet klaar voor VR.

Er zijn veel redenen om VR in te zetten voor het onderwijs. Palmer Luckey zelf kwam in een White House Google Hangout met twee argumenten. (White House, 2014). Ten eerste vertelde Luckey over educatieve schoolreisjes. Volgens hem zijn deze veel minder educatief dan ze zouden moeten zijn, doordat veel tijd verloren gaat aan reizen en het begeleiden van de kinderen. Daarnaast kosten de reisjes veel geld. Nu VR techniek goedkoper wordt, en het uitstapjes kan bieden naar plekken over de hele wereld, zouden schoolreisjes vervangen kunnen worden door virtuele reizen. De aanschafprijs en de onderhoudskosten van headmounted displays moeten dan wel afgewogen worden tegenover de meerwaarde en het aantal keer dat je die kunt gebruiken vind ik. Ten tweede noemde Luckey tijdstippen in de geschiedenis die niet in het echt te bezoeken zijn. VR werelden kunnen de geschiedenis simuleren en zo kennis bijbrengen over het verleden. In een literatuuronderzoek van het ‘institute for educational technology’ in Genova, Italië, komen verschillende onderzoeken naar toepassingen aan bod (Freina & Ott, 2014). Uit dit literatuuronderzoek blijkt dat VR, naast vrij bewegen in tijd en ruimte, zoals Palmer Luckey al noemde, ook vaak wordt gebruikt in situaties die in het echt gevaarlijk zouden zijn, of ethisch onverantwoord. Bijvoorbeeld omdat onervaren chirurgen niet in een brein mogen snijden of omdat soldaten gewond kunnen raken. Daarnaast zijn er nog meer redenen om VR te gebruiken in de klas. In een artikel op hypergridbussiness.com (Abrosimova, 2014) worden er nog vijf genoemd. Naast het feit dat in VR dingen mogelijk zijn die niet in de fysieke wereld niet uitvoerbaar zijn, wordt ook genoemd dat samenwerken in VR sociale integratie van leerlingen stimuleert. Verder worden leerlingen gemotiveerd door spelenderwijs leren in VR, heeft VR een betere aanpak van beloningen en leerlingen kunnen VR gebruiken om nieuwe dingen te creëren (Abrosimova, 2014).

VR stimuleert sociale integratie van leerlingen. Dat wordt bevestigd in een onafhankelijk onderzoek door Dr. Conor Galvin naar MissionV; een immersieve spelgebaseerde leeromgeving voor scholen (Galvin, 2012). Docenten die mee deden aan een pilot in 2011 en 2012 konden verschillende voorbeelden geven van leerlingen die voorheen slecht presteerden of moeilijk geaccepteerd werden door hun klasgenoten. Dankzij MissionV kregen die meer technologische kennis en daarom werden ze “geaccepteerd door hun leeftijdsgenoten“ (Galvin, 2012 p. 3). Volgens de docenten begrepen leerlingen over het algemeen de kennis ook beter en bleef die langer hangen. Dat studenten kennis beter begrijpen dankzij VR was al eerder te zien in een studie uit 2000 door Jackson en Fagan, beiden werkzaam aan de Universiteit van Washington (Jackson en Fagan, 2000). In deze studie mochten 56 leerlingen van 14 tot 15 jaar oud kennis maken met Global Change World; een simulatie waarin door de tijd gereisd kan worden om de effecten van het broeikaseffect duidelijk te maken. Tijdens hun leservaring toonden de studenten meer individuele inzet en werkten zij vaker samen om meningsverschillen te bediscussiëren, om overtuigingen te verwoorden en om samen theorieën te ontwikkelen. De auteurs stellen echter wel dat de leerlingen veel begeleiding van deskundigen nodig hadden tijdens de lessen. (Jackson en Fagan, 2000)

In Australië zijn docenten zelf aan de slag gegaan met het implementeren van virtuele werelden zoals Second Life in hun lessen. Deze werelden werden ingezet voor veel verschillende doeleinden, zoals te lezen in een onderzoeksrapport uit 2014 (Gregory e.a., 2014 p. 285). Uit hetzelfde rapport blijkt echter ook dat het implementeren veel moeilijker was dan veel docenten in eerste instantie hadden gedacht (Gregory e.a., 2014 p. 286). Sommige ondervraagde onderwijskundigen gaven aan dat er in hun ogen te weinig werd gedaan om virtuele werelden bruikbaar te maken voor docenten zonder technische kennis. Er moest door hen teveel aandacht besteed worden aan het doorkrijgen van de interface waardoor er minder tijd overbleef voor het geven van les. Ook werd door onderwijskundigen verteld dat veel docenten van voor af aan beginnen met het gebruik van virtuele werelden zonder voort te bouwen op het werk van anderen. Een reden hiervoor wordt genoemd in een ander onderzoek uit Australië (Newman e.a., 2013) Hierin beschrijven de zes auteurs, allemaal onderwijskundigen, vanuit hun eigen ervaringen en waarnemingen de redenen voor het uitblijven van succes voor virtuele werelden in het onderwijs. Dat projecten worden stopgezet, komt volgens hen omdat onderwijsinstellingen te weinig ondersteuning bieden (Newman e.a., 2013 p. 623). Er wordt niet nagedacht over de lange termijn, en als het budget op is of een docent vertrekt worden projecten stil gelegd en worden ze vergeten. Hierdoor moeten docenten dus steeds weer opnieuw lesprojecten opstarten. Virtuele werelden zullen ongetwijfeld veranderen door de komst van betaalbare headmounted displays zoals de Oculus Rift, maar het is aannemelijk dat de problemen hiervoor beschreven zullen blijven bestaan. Sterker nog, die problemen zullen groter worden. Want het programmeren van lesmateriaal voor immersive VR vereist meer technische kennis en de hardware brengt extra kosten met zich mee ten opzichte van virtuele werelden die met een computer benaderd worden. Dit wordt ook opgemerkt in een onderzoek naar de houding van leerlingen ten opzichte van VR leeromgevingen (Huang, 2010). De auteurs, onderzoekers van universiteiten uit Taiwan en Amerika, benadrukken dat onderwijsinstellingen ondersteuning moeten bieden aan docenten die geen kennis van programmeren hebben. (Huang, 2010 p. 1180).

Om er achter te komen wat mijn docenten van VR vinden heb ik een enquete afgenomen bij zeven docenten van de opleiding Communicatie & Multimedia Design aan de Hogeschool Rotterdam (De Wit, 2015). De docenten zagen veel verschillende mogelijkheden, zoals het stimuleren van het verbeeldingsvermogen, het creëren van nieuwe toepassingen of leren om problemen op te lossen. Maar de docenten gaven wel aan zelf weinig tot geen ervaring met VR te hebben. De enige docent die wel ervaring had met Virtual Realiy binnen het onderwijs gaf aan dat systemen plug en play moeten zijn zodat docenten niet aan de implementatie hoeven te werken. Ook gaven twee docenten aan dat er nog geen lesprogramma’s voor VR zijn. Vanuit de Hogeschool Rotterdam is er een vooruitblik voor de periode 2015-2018 (Hogeschool Rotterdam, 2015). Daarin staat dat de hogeschool docenten verder wil professionaliseren op o.a. vernieuwende onderwijsvormen en wil investeren in ict-faciliteiten om de fysieke leeromgevingen beter aan te laten sluiten op de identiteit en wensen van de opleidingen (Hogeschool Rotterdam, 2015 p. 16). Docenten zouden hierdoor misschien ondersteuning kunnen krijgen en er kan budget vrijgemaakt worden om VR hardware aan te schaffen. Dat is nodig om lesgeven met Virtual Reality een succes te maken, want uit navraag bleek dat er op de hogeschool nog niemand aanwezig is die docenten kan trainen en ondersteunen bij het gebruik van VR hardware en VR leeromgevingen (De Wit, 2014).

VR in het onderwijs kent zeker veel mogelijkheden, zoals die genoemd worden door Palmer Luckey en anderen, en VR kan studenten motiveren in hun leerproces. Maar om VR succesvol in het onderwijs te implementeren is ondersteuning nodig voor docenten die er mee gaan werken. In Australië is dat bij docenten die zelf aan de slag gingen met virtuele werelden niet het geval geweest. Ook uit mijn eigen onderzoek blijkt dat er nog geen lesprogramma’s zijn op de hogeschool Rotterdam. Om headmounted displays zoals de Oculus Rift een succes te maken, is er dus een andere aanpak nodig. Onderwijsinstituten moeten budget vrijmaken voor VR projecten en plannen maken voor de lange termijn zodat docenten op de juiste manier ondersteund kunnen worden. Pas dan is het onderwijs echt klaar voor Virtual Reality.

Bronnen

Abrosimova, Kate (7 september 2014). 5 ways virtual reality will change education [Artikel]. Geaadpleegd op 22 juni 2015 van http://www.hypergridbusiness.com/2014/09/5-ways-virtual-reality-will-change-education/

Freina, Laura & Ott, Michella (2014). A Literature Review on Immersive Virtual Reality in Education:
State Of The Art and Perspectives [Onderzoek]. Geraadpleegd op 22 juni 2015 van http://www.itd.cnr.it/download/eLSE%202015%20Freina%20Ott%20Paper.pdf

Galvin, Connor (augustus 2012). MissionV Schools Pilot Programme: A Note on Key Findings [Onderzoek]. Geraadpleegd op 22 juni 2015 van https://dl.dropboxusercontent.com/u/63418/MissionV/Key%20Findings%20from%20Conor%20Galvin%20Evaluation%20-MissionV.pdf

Gregory, Sue. e.a. (2014). Rhetoric and reality: critical perspectives on education in a
3D virtual world [Onderzoek]. Geraadpleegd op 22 juni 2015 van http://ascilite2014.otago.ac.nz/files/fullpapers/231-Gregory.pdf

Jackson, Randolph L. en Fagan, Eileen (2000). Collaboration and learning within immersive virtual reality [Onderzoek]. Geraadpleegd op 9 juni 2015 van http://dl.acm.org/citation.cfm?id=351006.351018&coll=DL&dl=ACM.

Hogeschool Rotterdam (2 juni 2015). Financiëel verslag 2014 [Jaarverslag]. Geraadpleegd op 26 juni 2015 van http://www.hogeschoolrotterdam.nl/hogeschool/publicaties/jaarverslagen

Huang, Hsiu-Mei (20 april 2010) Investigating learners’ attitudes toward virtual reality learning environments: Based on a constructivist approach [Onderzoek]. Geraadpleegd op 22 juni 2015 van http://www.sciencedirect.com.ezproxy.hro.nl/science/article/pii/S0360131510001466#

Lamb, Jason (5 juni 2014). Awesome, Palmer Luckey replied to an email I sent him regarding education initiatives for @oculus [Tweet]. Geraadpleegd op 9 juni 2015 van https://twitter.com/jasonlamb/status/474378690181488640

Newman, Christine e.a. (2013). Virtual Worlds for learning: done and dusted? [Onderzoek]. Geraadpleegd op 22 juni 2015 van http://www.ascilite.org/conferences/sydney13/program/papers/Newman.pdf

White House (8 januari 2014). We the Geeks: Future of Computing [Youtube Video]. Geraadpleegd op 9 juni 2015 van
www.youtube.com/watch?v=5Q4euLAhNRo

Wit, Daniël de (26-6-2015). Meningen van docenten CMD aan de Hogeschool Rotterdam over Virtual Reality [Enquete].

Zückerberg, Mark (25 maart 2014). [Facebookpost]. Geraadpleegd op 9 juni 2015 van https://www.facebook.com/zuck/posts/10101319050523971

SVG animaties met snap.svg

SVG is bedoeld om vector illustraties op het web te tonen. De structuur van de taal bestaat namelijk uit xml. Daarom is het ook gemakkelijk om svg objecten te beïnvloeden met javascript.

Snap.svg is een javascript library die daar heel mooi gebruik van maakt. Zo kun je gemakkelijk zelf keigave animaties en ander interactieve applicaties bouwen.

http://snapsvg.io/

Voor mijn porftolio intro wilde ik een kameleon animeren die met zijn tong een duizendpoot vangt en vervolgens op eet. Het resultaat kun je bekijken op http://daniel-dewit.nl als je een paar keer naar beneden scrollt. Het eerste wat ik nodig had was een svg-illustratie van  een kameleon. Die heb ik in het programma Inkscape gemaakt.

https://inkscape.org/en/

chameleon_compiled

Inkscape is een handig programma omdat het gebaseerd is op het svg formaat. Illustraties die je maakt in Inkscape worden dus standaard opgeslagen als svg-afbeelding. Als je een svg-afbeelding voor het web wilt maken is het wel belangrijk om bij het opslaan te kiezen voor ‘geoptimaliseerde svg’. Er wordt dan leesbare code gegenereerd en je krijgt dan een aantal extra opties zoals het instellen van een viewbox. Viewbox is belangrijk bij het maken van responsive svg-afbeeldingen.

inkscape-export

Als je de afbeelding hebt opgeslagen kun je die openen in een tekst-editor en alle code er uithalen om in je webapplicatie te gebruiken. De volgende stap is om je svg-afbeelding met snap aan een javascript variabele te binden. Dat doe je met de functie Snap(). Daarna kun je onderdelen uit je svg-afbeelding aan aparte variabelen binden met select() zodat je die kunt animeren.

var chameleon = Snap("#chameleon");
var chameleonWrap = chameleon.select("#chameleon-wrap"); 
var chameleonMaw = chameleon.select("#chameleon #jaw"); 
var chameleonTongue = chameleon.select("#chameleon #tongue");
var chameleonHead = chameleon.select("#chameleon #head");

Nu heb ik een svg-afbeelding gemaakt en die verbonden met javascript variabelen. Er beweegt echter nog niets en dat is natuurlijk wel wat we willen doen. Snap.svg heeft daar een mooie functie voor, genaamd animate(). Met die functie kun je een nieuwe positie aangeven, de tijd die de animatie in beslag neemt en een versnellingsfunctie.

In mijn geval wil ik eerst de kaak openen voordat de tong uit de bek van de kameleon schiet. Daarvoor moet ik eerst weten hoe de functie animate() precies werkt. Die functie accepteert namelijk voor de nieuwe positie een array met svg-attributen. Om een vlak uit de svg-afbeelding te draaien moet ik het attribuut ‘transform’ aanpassen met de functie rotate(). En in die functie kun je de graden van de draaihoek en de x- en y-positie van de as aangeven. Bij mij wordt dat dan transform=”rotate(-20, 260, 110)”. In de snap functie animate() ziet dat er weer een klein beetje anders uit:

chameleonHead.animate({transform: 'r-20, 260, 110'}, 500, mina.easein);
chameleonMaw.animate({transform: 'r30, 260, 110'}, 500, mina.easein);
chameleonTongue.animate({transform: 'r20, 260, 110'}, 500, mina.easein);

Wanneer je dit script uitvoert in de browser zullen het hoofd en de tong en kaak van de kameleon in een halve seconde een draai maken. Maar nu wil ik ook nog de tong uit de bek laten schieten en tegen de duizendpoot laten botsen. Dat is iets ingewikkelder omdat ik daarvoor een pad moet aanpassen. In de code is dat niet te doen, maar met Inkscape is dat een stuk makkelijker.

Eerst draai ik ook in inkscape het hoofd, de kaak en de tong van de kameleon zodat de tong tevoorschijn komt op het canvas. Dat doe ik door de XML-editor te openen (bewerken > XML-editor) en de juiste elementen op te zoeken. Vervolgens kan ik in de editor het attribuut ‘transform’ toevoegen en de functie rotate() invullen.

inkscape xml editor rotate

Als ik dat heb toegepast kan ik op het canvas de tong bewerken door simpelweg pad-punten te verslepen. Tenslotte moet het pad weer terugvertaald worden naar een code. Die vind ik terug door in de XML-editor het pad van de tong op te zoeken en het attribuut ‘d’ aan te klikken. De code die dan tevoorschijn komt kan ik kopiëren en gebruiken met snap.svg.

inkscape xml editor

chameleonTongue.animate({d: 'm 254.142,105.465 c -0.91945,-4.73936 212.92389,-28.907989 374.41877,-26.893877 14.68355,0.183128 30.33905,15.332279 43.93075,15.714335 17.63322,0.495662 25.77761,-27.528571 41.00876,-25.899587 12.10879,1.295046 21.50394,13.74826 29.96377,19.69398 17.4323,12.251739 18.0602,-38.721554 26.41324,-35.997065 18.82566,6.140313 10.78299,32.752814 12.73743,45.135922 1.70453,10.799752 19.51626,40.672592 2.80281,46.348052 -5.31187,1.80377 -15.86623,-33.98243 -36.06211,-32.1603 -18.51088,1.6701 -24.00996,-14.403424 -36.34335,-12.354748 C 700.70693,101.0957 690.0714,117.01068 675.42381,116.11625 658.40639,115.07712 631.04537,95.873998 612.28816,95.29318 480.63912,91.216661 328.49376,115.83493 322.005,118.183 c -13.249,3.929 -66.362,-4.981 -67.863,-12.718 z'}, 100, mina.linear);

Handig om te weten is dat de animate() functie ook een callback accepteert. Op die manier kun je nadat je animatie klaar is een nieuwe animatie uitvoeren door opnieuw de animate() functie aan te roepen.

chameleonTongue.animate({transform: 'r0, 260, 110'}, 500, mina.easein,function() {
    chameleonTongue.animate({transform: 'r15, 260, 110'}, 500, mina.easein);
});

HTML & CSS Videolessen

Er wordt mij vaak gevraagd om uit te leggen hoe je met html en css een website kunt bouwen. Om die reden heb ik drie videolessen opgenomen waarin ik uitleg geef. In de video’s behandel ik basiskennis over html-tags, id’s en classes, positionering en margin en padding. Ik ben van plan om later nog twee videolessen toe te voegen waarin ik uitleg hoe je die basiskennis gebruikt om een volledige webpagina te maken.

Responsive Font-size met ‘%’ ‘px’, ‘em’ of ‘rem’

Stel dat je een website bezoekt op je desktop. Het normale lettertype grootte op een desktop is 16 pixels, maar veel webdesigners schalen dat naar beneden omdat de website op meerdere types schermen bekeken moet worden. Het gevolg is dat je met je ogen veel te dicht op je scherm gaat zitten om de tekst nog te lezen. Dezelfde situatie maar dan andersom doet zich voor als je de website op een mobiel bekijkt. Omdat de letters nu supergroot zijn moet je je mobiel bijna een meter van je gezicht afhouden om comfortabel te kunnen lezen. Op dit moment denk je misschien, zou het niet veel mooier zijn als de grootte van het lettertype zich aanpast aan de grootte van het scherm dat je op dat moment gebruikt. Nou, dat kan.

Sinds versie 3 van css is het mogelijk om zogenaamde media-queries te gebruiken op je website. Je kunt dan per type scherm instellen wat de website moet laten zien. Hieronder een voorbeeld van hoe je stylesheet eruit zou kunnen zien als je een desktop, een tablet en een mobiel wilt ondersteunen, dat mobile-first doet, en je pixels gebruikt om je lettergrootte in te stellen.

h1 { font-size: 16px;}

h2 { font-size: 12px;}

p { font-size: 10px;}

 

@media all and (min-width: 980px) {

h1 { font-size: 20px;}

h2 { font-size: 14px;}

p { font-size: 12px;}

}

 

@media all and (min-width: 1260px) {

h1 { font-size: 24px;}

h2 { font-size: 18px;}

p { font-size: 16px;}

}

Probleem opgelost? Niet dus. Want versies 8 van Internet Explorer en lager ondersteunen geen pixels als eenheid om lettergroottes mee in te stellen. En anno 2014 zijn er nog steeds legio bedrijven die een verouderde versie van internet explorer gebruiken. En wie neemt hen dat kwalijk, met hun eigenwijze systeembeheerders die niets zien in vernieuwing (lees: extra werk).

Nu komt de eenheid ‘em’ in beeld. Em wordt gebruikt als relatieve eenheid, zodat Internet Explorer je webpagina netjes kan schalen. Wanneer je de standaard lettergrootte van het document op 16px laat staan, zal een h1 element met een lettergrootte van ‘1.5em’ anderhalf keer zo groot zijn als 16 pixels, 22 pixels dus. Alleen het vervelende em is dat het als basis lettergrootte niet de standaard lettergrootte van het document neemt, maar de lettergrootte van het omvattende element. Heb je dus een standaard lettergrootte van 16 pixels, een div element met een lettergrootte van 0.8em, en daarin een p element met een lettergrootte van nog eens 0.8 em, dan wordt je lettergrootte in pixels 16 * 0.8 * 0.8 = 10,24 pixels, en dat slaat natuurlijk nergens op. Laat staan dat het makkelijk is om mee te rekenen. Eigenlijk schiet je met ‘em’ dus niets meer op dan wanneer je procenten gebruikt om je lettertypes te schalen, wat net zo min is aan te raden.

En daarom is er in versie 3 van css nog iets nieuws uitgevonden. De eenheid ‘rem’, wat staat voor root-em. Met rem hoef je niet steeds rekening te houden met de lettergrootte van het omvattende element, maar hoef je maar één keer de lettergrootte van het document in te stellen waarna je dat rem overal x aantal keer kunt vergroten of verkleinen.

Als je bovendien de lettergrootte van het document op 62.5% instelt kun je heel gemakkelijk zien op welk aantal pixels de lettergrootte uitkomt,  want want 16px * 0,625 = 10 pixels. 2.4rem is dan gewoon 24 pixels als je het omrekent. Wanneer je je website vervolgens responsive maakt wordt alles nog makkelijker omdat je alleen de lettergrootte van je document hoeft aan te passen, de rest wordt automatisch mee geschaald. Hieronder laat ik zien hoe je stylesheet er dan uitziet. Speciaal voor browsers die rem niet ondersteunen heb ik nog wel het aantal pixels ingesteld. Daarna stel ik steeds het aantal rem in zodat nieuwe en moderne browsers een relatieve lettergrootte gebruiken.

 

html { font-size: 62.5%)

h1 { font-size: 16px; font-size: 1.6rem;}

h2 { font-size: 12px; font-size: 1.2rem;}

p { font-size: 10px; font-size: 1.0rem;}

 

@media all and (min-width: 980px) {

html { font-size: 80%; }

}

@media all and (min-width: 1260px) {

html {font-size: {font-size: 100%;}

}

Hieronder staat bij bron 3 een link naar een webpagina waarbij ik het lettertype op deze manier responsive heb gemaakt. Als je de pagina op een desktop opent kun je het venster verkleinen en vergroten om eens te kijken welk effect dat heeft op de grootte van het lettertype.

Bronnen

1. http://www.w3schools.com/css/css_font.asp
2. http://snook.ca/archives/html_and_css/font-size-with-rem
3. http://www.daniel-dewit.nl/wp-content/Responsive%20design/index.html

On scroll footer

Voor mijn werk liep ik tijdens het bouwen van een website voor een klant tegen een probleem met een footer aan. De klant wilde graag dat de footer altijd te zien was ondanks hoe groot of hoe klein het scherm van de gebruiker was. Hij kwam zelf met het voorstel om de gehele website te verkleinen, maar dat is natuurlijk niet mooi in verband met leesbaarheid en ruimtegebruik. Na wat hersenwerk bedacht ik me dat sommige website een dynamische header gebruiken, die kleiner wordt als je naar beneden scrollt op de webpagina, maar wel altijd bovenin zichtbaar blijft.

Het leek me de ideale oplossing omdat principe op de footer in de website van de klant te los te laten. Echter tot mijn verbazing bleek dat er talloze jquery scripts waren voor zulke dynamische headers, maar geen enkele voor een dynamische footer. Na wat zoekwerk bleek dat de oorzaak lag bij jquery, die wel een functie voor scrollTop hadden, maar geen functie voor scrollBotttom die nodig is voor een dynamische footer. Gelukkig was de oplossing zoals altijd op internet te vinden, en was er al iemand geweest die in één regeltje code een vervangen voor scrollBottom had geschreven. Met behulp van dat stukje code kon ik toen mijn eigen script schrijven, dat heel simpel de class van de footer aanpast zodra je de onderkant van de pagina hebt bereikt. Zo kun je de footer twee uiterlijken geven, een grote voor de onderkant van de pagina en een kleine voor als de gebruiker niet aan de onderkant van de pagina is en er weinig ruimte beschikbaar is.

$(document).ready(function() {
    if ($(document).height() > $(window).height()) {
        $("#footer").addClass("footersmall");
    }
    else {
        $("#footer").addClass("footerbig");
    }    
    $(window).scroll(function() {
        var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
        if (scrollBottom > 170) {    
            $("#footer").addClass('footersmall').removeClass('footerbig');
            $(".footerspace").css('display', 'block');        
        } else {  
            $("#footer").addClass('footerbig').removeClass('footersmall');
            $(".footerspace").css('display', 'none');        
        }
    });     
});

Een aantekening bij het script is wel dat de footer twee statische hoogtes nodig heeft wil dit script goed werken. Zodra de footer namelijk kleiner wordt zal er onzichtbare ruimte onder de pagina toegevoegd worden, en die moet hetzelfde zijn als de hoogte van de grote footer. Ook is er een vaste waarde die bepaald vanaf welk aantal pixels scrollen vanaf de onderkant de gebruiker een kleinere footer krijgt voorgeschoteld. Maar als je al die waarden goed hebt ingesteld krijg je een footer die vloeiend groter of kleiner wordt afhankelijk van hoever de gebruiker naar beneden scrollt, en dat loont.

Een werkend voorbeeld is te zien op http:www.vizoverwarming.nl/, de website van de klant waar ik het script voor geschreven heb.

Update: Inmiddels is de werking van het script niet meer te zien op de website van de klant.