Als afsluiting van mijn stageperiode als frontend webdeveloper moest ik een afstudeeropdracht uitvoeren. Aangezien a&m impact altijd op zoek is naar de nieuwste technieken en mogelijkheden, kreeg ik de mogelijkheid om een parallax website te ontwerpen. Dit leek mij een leuke en leerzame uitdaging en heb deze met beide handen aangegrepen.
Parallax?
Parallax is een nieuwe techniek die het mogelijk maakt om verschillende lagen onafhankelijk van elkaar te laten verschuiven. Ze worden door elkaar overlapt. Dit kan aan de hand van de scroll positie of de muispositie binnen de site. Hierdoor krijg je een mooi 3D effect. Een mooi en bekend voorbeeld is www.nikebetterworld.com.
Hoe werkt parallax?
Stel je wilt de achtergrond verplaatsen op het moment dat er gescrold wordt, dan wordt er de volgende functie gebruikt (stukje wiskunde):
function newPos(x, windowHeight, pos, adjuster, inertia){
return x + "% " + (-((windowHeight + pos) - adjuster) * inertia) + "px";
}
Uitleg:
• x = the horizontale positie van de afbeelding
• windowHeight = de hoogte van je browser
• pos = de positie van de scrollbar
• adjuster = de waarde waarmee je de uitkomst wilt corrigeren
• px = met hoeveel pixels de afbeelding moet scrollen
Vervolgens wordt er aan de hand van de volgende code de positie berekend:
photo.css({'backgroundPosition': newPos(50, windowHeight, pos, 3200, -0.1)});
Daarbij komt de volgende uitkomst: background-position: 50% 25.4px;
Telkens dat er gescrold wordt komen er een aantal pixels bij.
Hoe ben ik te werk gegaan
1: Analyseren en voorbereiding
De eerste fase bestaat uit het bekijken en analyseren van verschillende websites. Van daaruit heb ik bekeken wat de beste mogelijkheden en oplossingen zijn.
2: XHTML
Na het analyseren van een aantal websites heb ik een ontwerp gemaakt en omgezet naar XHTML. Deze heb ik zo opgebouwd zodat dit gaat werken met het parallax effect.
3: De opmaak
De opmaak wordt gemaakt in CSS(3). In de CSS geef ik het pad van de achtergrond afbeeldingen aan waarbij jQuery de positie regelt aan de hand van de scroll positie.
4: Parallax
De jQuery, hier gebeurt het allemaal. Op het moment dat er een div binnen de browser wordt getoond begint het verplaatsen van de achtergrond. Dit heb ik gedaan door de genoemde code te gebruiken bij het voorbeeld.
Tot slot
Over het eindresultaat ben ik zeer tevreden en dat mag ook wel met een eindcijfer van maar liefst een 9. Ben jij ook benieuwd? Hij is te bewonderen op http://pascalmijnen.am-impact.nl
Net als 
Het congres werd geopend met een interessante presentatie van Aral Balkan, ” The future is native” genaamd. Het doel van presentatie was vooral om duidelijk te maken dat het onderscheid tussen een Native (specifiek voor het platform geschreven) en een Web applicatie aan het verdwijnen is. Een aantal mensen uit de community zijn hier te fundamentalistisch over en dat is volgens hem niet nodig. Verder gaat het aantal diverse apparaten wat toegang gaat krijgen tot web-content (door een native of webapplicatie) behoorlijk toenemen en is het een utopie om te denken dat je maar 1 keer een applicatie of vormgeving hoeft te maken, “write once”, maar vaak testen en optimaliseren zijn noodzakelijk. Volgens Aral zou niet de techniek, maar de ervaring voor de gebruiker leidend moeten zijn. Een front-end developer moet vooral vanuit een mens denken en niet teveel vanuit techniek of features.
Derek Featherstone liet ons naar een website kijken door de ogen van een screenreader. Het is namelijk erg belangrijk dat ook mensen met een beperking een site kunnen bezoeken. Dat werkt nu nog te vaak niet goed. Daarnaast gaf hij een aantal voorbeelden van het verkeerd gebruik van tab-indexen op formelementen en gaf hij aan wat het meest logisch is voor de gebruiker en een eventuele screenreader. Ook sprak hij over 
Lea Verou had een erg interessante presentatie over CSS3. Ze vertelt dingen waarvan maar weinigen weten dat het mogelijk is . Zo laat ze zien welke achtergrond patronen je kan maken alleen met CSS3! (
Uiteraard kwam HTML5 ook nog aan bod. Bruce Lawson vertelde op een erg grappige manier over de wat minder bekende tags binnen de HTML5 standaard en hun semantische betekenis. Semantiek houd vooral in dat het betekenis toevoegt aan een document. Hij benadrukte dat HTML5 tags een einde zou kunnen maken aan de wildgroei van diverse ID en classnames, die aan betekenis weinig toevoegen aan een webpagina. oa. de <ruby>, <bdi> en <figure> tags en had hij het over “sectioning” binnen content.
Stephen Hay sprak over de mogelijkheid om een webpagina meer op te laten maken als een krant of magazine. Binnen traditionele DTP pakketten is dit al heel lang mogelijk, maar web/frontend development loopt nog achter. Adobe is al bezig om mbv regions dit voor elkaar te krijgen.
Tab Atkins werkt bij Google aan de browser Chrome en is lid van de CSS3 Working Group. Hij liet een aantal coole dingen zien. Zo is het mogelijk om HTML elementen te gebruiken als achtergrondafbeelding. Het invoeren van variabelen binnen CSS files was erg interessant, hiermee word het mogelijk om bijvoorbeeld een kleur 1 keer te definieren, wat het overbodig maakt om dmv. find and replace alle kleuren te moeten vervangen. Ook het gebruik van de calc functie in CSS klinkt veelbelovend. Tof om te weten dat er nieuwe dingen aan komen.
De dag begon met een presentatie van Alex Russell, een developer van Google. Het was meteen een presentatie om je aandacht er goed bij te houden, want het was vrij ingewikkeld. Hij focuste met name op het kijken in de toekomst. Het was wel duidelijk dat hij niet echt gecharmeerd was van hacks en manieren om nieuwe technieken te kunnen gaan gebruiken om ook oudere browsers te ondersteunen. Een klein puntje wat hij aanhaalde viel me op, namelijk het gebruik van scoped css. Dat is css die je in je element zet en die dus alleen wordt gebruikt voor de inhoud van dat element.
De volgende die het podium op kwam heet Divya Manian. Ze werkt bij Opera en werkt mee aan de 
Robert Nyman was hierna aan de beurt en ging presenteren wat met HTML5 in combinatie met formulieren mogelijk was. Een korte presentatie (half uurtje), waar al wel veel voor ons bekende zaken in naar voren kwamen.
John Resig is de de oprichter van 
De meest nuttige presentatie van deze dag kwam van Jake Archibald. Hij kreeg makkelijk een uur vol over het gebruik van lettertypes in je site dmv @font-face. Hij behandelde tot in detail hoe de verschillende browsers om gaan met de implementatie en hoe je het laden van fonts kan optimaliseren.
De afsluiter van de dag (en dus van Fronteers11) was net als vorig jaar Christian Heilmann, Developer Evangelist van Mozilla. Hij gaf een inspirerende preek over het gebruik van nieuwe technieken. Wij weten hoe het moet, dus moeten we het delen. Dmv bijvoorbeeld Github kun je elkaar helpen en aanvullen.
