HTML5 en jQuery voor parallax effect in de Netlash-bSeen website

HTML5 en jQuery voor parallax effect in de Netlash bSeen website

Zoals de meesten onder jullie waarschijnlijk weten zijn Netlash en bSeen gefuseerd. We besloten een experimentele website te maken om op de meest voor de hand liggende vragen al meteen een antwoord te geven.

Na een brainstorm met de designers kwamen we tot het idee onze eigen take op het parallax effect te bouwen. Na het uitwerken van een ontwerp was het aan mij om het concept tot zijn recht te laten komen. Met deze blogpost wil ik mijn werkwijze kort schetsen en uitleggen hoe ik tewerk ben gegaan.

Hoe ben ik eraan begonnen?

Eerst heb ik natuurlijk research gedaan naar andere sites die een gelijkaardig effect hebben, waarvan Nike het bekendste voorbeeld is. Na het evalueren van verschillende technieken besloot ik deze implementatie te gebruiken.

Stap één

De eerste stap was het opbouwen van de HTML-structuur. Omdat we bij Netlash altijd proberen met de nieuwste technologieën te werken, besloot ik met HTML5 te werken. Dit was één van de eerste keren dat ik HTML5 voor een website gebruikte dus ook dat vroeg wat research.

De structuur van de website is relatief simpel opgebouwd met sections. De eerste section bevat het logo, de vragen en een zoekformulier. Daarna kreeg elke vraag een eigen section met background-image en helemaal onderaan nog een laatste section voor het contactformulier.

Stap twee

De CSS. Deze is redelijk beperkt en eenvoudig. Je stelt de background-image telkens in voor de juiste section, zet die fixed en geeft de juiste afmetingen mee aan elke section. Zo krijg je uiteindelijk alle foto's netjes onder elkaar zonder dat die in de section zelf bewegen wanneer je scrollt. Bovendien bekijk je deze website het beste in Webkit-browsers (Chrome of Safari), want die hebben nog enkele leuke css-extra's.

Stap drie

Time for some jQuery-magic! Het parallax is mogelijk door de background-position aan te passen, afhankelijk van het scrollgedrag van de gebruiker. Voor dit gedeelte heb ik me voor het grootste deel gebaseerd op de jQuery Parallax demo zoals boven vernoemd. Daarbij wordt een functie met enkele parameters gebruikt die telkens wordt aangeroepen wanneer de gebruiker scrollt. Zo wordt de background-position "on the fly" aangepast, liefst met een multiplier zodat het parallax effect duidelijk zichtbaar is.

Het grootste probleem dat ik hier ondervind en voorlopig nog niet heb kunnen omzeilen, zijn de verschillende schermresoluties. Afhankelijk daarvan ontstaan er witruimtes tussen de foto's tijdens het scrollen (vooral bij hele lage of hele hoge resolutie). Feedback over mogelijke oplossingen hiervoor is dus zeker welkom.

Tot slot

Voor mij is de site een geslaagd experiment waar we veel uit geleerd hebben. Op naar de volgende uitdaging!

 

Bekijk de Netlash-bSeen minisite.

 

Lees meer

Iedereen bij Wijs deelt zijn expertise, ook Jasper en Evi. Benieuwd naar de laatste nieuwtjes en blogposts? Schrijf je in voor onze nieuwsbrief!