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

, # Webdesign

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.

 

Meer weten? Advies nodig?

Kom gerust langs voor een kop koffie en een goed gesprek. Wijs geeft strategisch advies, en helpt bij het uitwerken en verbeteren van all things digital.

Gerelateerde diensten

Gerelateerde cases

  • BIVV

  • Website en online marketing voor Anabiotec

Gerelateerde artikels

 

Al 14 reacties

Laat hier een reactie achter of contacteer ons via e-mail


schreef

Like a boss!


schreef

Mooi gemaakt, en vooral de burelen. Dit behoort tot de mooiste/leukste werkplekken van België. Mss wel nog sommise vragen beter zichtbaar zetten, het overlapt elkaar waardoor niet alles perfect leesbaar is.


schreef

alle informatie komt op deze manier op 1 pagina terecht, wat is het effect hiervan que SEO? hebben jullie hier al over nagedacht?

ik vind de Nike-site geweldig, waar de demo en jullie site heel haperig scrollt, misschien toch een andere formule voor het scrollen van de images? of lagere resoluties gebruiken voor de foto's?

leuk experiment wel, thx for the update :)


schreef

Werkt dit probleemloos in alle browsers aangezien er gebruik gemaakt wordt van HTML5? Een site die enkel correct werkt in FF en Chrome is in België niet ideaal.


schreef

Leuk gemaakt, hier werkt het echter niet 100 % (IE7). In Chrome is het perfect!


schreef

Ik vind het wel gaaf gemaakt. Ben ook benieuwd of HTML 5 ook goed omgaat met mobiele browsers, zeker als daar meer gevraagd wordt van de telefoon.


schreef

In Konqueror 4.5.1 werkt het ook nog niet helemaal soepel. Terwijl nikebetterworld.com wel goed gaat.


schreef

Wauw ziet er geweldig uit!


schreef

De website is heel mooi gemaakt, het is zo ongelofelijk dynamisch wat het geheel heel speels en tegelijk professioneel maakt. Proficiat


schreef

Mooi resultaat! Dat nu maar snel alle browsers html5 ondersteunen en dat gebruiker nog sneller overstappen.


schreef

Zeer mooi resultaat! Ik ga mij hier ook eens in verdiepen...De voordelen van HTML 5 beginnen echt wel door te wegen...


schreef

leuk gemaakt, is er ook al vraag naar zulke website door klanten? De werking in de verschillend browsers blijft een probleem.


schreef

Ziet er mooi uit zeker die fixed background!


schreef

Mooie website, heel strak en netjes opgebouwd. De grote foto op de achtergond komt goed tot zijn recht.

Plaats een nieuwe reactie