Inhoud
- 01. Maak het mobielvriendelijk
- 02. Gebruik het niet zomaar
- 03.Maak het leuk
- 04. Laat het een verhaal vertellen
- 05.Maak het boeiend
- 06. Harnas oproepen tot actie
- 07. Voeg laagjes en diepte toe
- 08. Overdrijf het niet
- 09. Onthoud IE
- 10. Voorladen van activa
- Vond dit leuk? Lees deze!
De term ‘parallax’ verwijst naar de schijnbare beweging van objecten wanneer deze vanuit verschillende posities worden bekeken. De techniek werd oorspronkelijk gebruikt in 2D-videogames waarbij achtergrondafbeeldingen langzamer bewogen dan voorgrondafbeeldingen, waardoor een illusie van diepte werd gecreëerd. Wie had gedacht dat iets dat in 1982 gepopulariseerd werd in arcadespel Moon Patrol 30 jaar later een belangrijke trend zou worden voor webdesign!
Parallax-websites hebben een lange weg afgelegd sinds de eenvoudige tweelaagse site. Met HTML5, CSS3 en moderne browsers zijn er veel parallax-sites die meervlaks-animatie gebruiken, nieuwe elementen introduceren en beweging creëren buiten de y-as door te scrollen. Als je niet bekend bent, bekijk dan deze oogverblindende voorbeelden van websites met parallax-scrollen.
Het creëren van een van deze visueel interactieve meesterwerken kan overweldigend zijn, dus hier zijn 10 tips die u zullen helpen uw parallax-scrolende websites op de juiste manier te bouwen.
01. Maak het mobielvriendelijk
Het is geen verrassing dat met de toename van internetgebruik via mobiele apparaten, ontwerpconcepten zoals mobile first en responsive webdesign erg populair zijn geworden.
Momenteel zijn de meeste parallax-scrollende websites niet geschikt voor mobiele apparaten, inclusief de grote namen zoals de hierboven afgebeelde Peugeot-graphic novel. Maar gezien de trend naar mobiel internetgebruik, zal die aanpak in toenemende mate onhoudbaar worden.
02. Gebruik het niet zomaar
Parallax-scrollen is een erg coole technologie, maar probeer het niet zomaar te gebruiken. De hierboven getoonde site van Green Splash Design is goed ontworpen en voldoet perfect aan zijn doel, maar het gebruik van parallax-scrollen voegt niet veel toe aan de gebruikerservaring.
03.Maak het leuk
Het publiek wil graag worden vermaakt en parallax-scrollen wordt vaak gebruikt om gebruikers wat plezier te geven. De Kystalrae Fall Collection - waarbij de outfit van het gegeven model verandert als de gebruiker naar beneden scrolt - is een goed voorbeeld van een onderhoudend gebruik van de techniek.
04. Laat het een verhaal vertellen
Parallax-scrollen kan worden gebruikt om uw bezoekers mee te nemen op reis door een tijdlijn of verhaal. De site van Digital Agency inTacto is een goed voorbeeld van parallax-scrollen dat wordt gebruikt om de geschiedenis van een bedrijf op een leuke en meeslepende manier te vertellen.
05.Maak het boeiend
De Activate Drinks-website betrekt zijn publiek met slim gebruik van animaties en parallax-scrollen. Het is altijd een uitdaging geweest voor ontwerpers om de gebruiker op uw website te houden. Maar parallax-scrollen kan de aantrekkingskracht van natuurlijke nieuwsgierigheid vergroten als het visuele effect leuk, aanlokkelijk en / of hypnotiserend is.
06. Harnas oproepen tot actie
We scrollen en er gebeurt iets. Het benutten van de directe feedback bij interactie met websites met parallax-scrollen is een geweldige manier om mensen naar uw site te trekken en hen naar uw call-to-action te lokken.
De website van de Tinke-fitnessgadget lokt bezoekers bijvoorbeeld naar de 'volgende knop'-oproep met afbeeldingen van de gadget die in wisselwerking staat met het parallax-scrollen. De website leidt de bezoeker ook perfect naar de 'Shop Now'-call-to-action onderaan de pagina.
07. Voeg laagjes en diepte toe
Madwells eigen site heeft niet voor niets een awwwards-site van de dag gewonnen, aangezien de website een perfect gebruik van lagen en diepte laat zien voor een parallax-scrolsite. Let op de snel bewegende wazige voorgrondbeelden in vergelijking met de langzaam bewegende heldere achtergrondbeelden.
Zoals eerder opgemerkt, gaat de kunst van parallax over het creëren van een illusie van diepte. Denk eraan om te experimenteren en niet op te geven!
08. Overdrijf het niet
Muffi heeft zijn website gebombardeerd met allerlei fantasieën, en het is absoluut een indrukwekkend vertoon van technische bekwaamheid en prachtige beelden. Persoonlijk ben ik echter van mening dat ze iets te ver zijn gegaan met het gebruik van parallax-scrollen. Als het moeilijk wordt om het bedrijfslogo te vinden en te begrijpen waar de website precies over gaat, moet u waarschijnlijk het mogelijke overmatig gebruik van technologie in twijfel trekken.
09. Onthoud IE
Het is terecht gebruikelijk voor webontwikkelaars om cross-browser tests uit te voeren. En het is vooral belangrijk bij websites met parallax-scrollen, omdat ze waarschijnlijk HTML5 en CSS3 gebruiken. HTML5 Boilerplate cam helpt bij de meeste cross-browser normalisatie en bevat fixes voor Internet Explorer.
10. Voorladen van activa
Bij een groot aantal websites met parallax-scrollen wordt veel gebruikgemaakt van afbeeldingen. Vaak kan het gebruik van andere multimedia-middelen ook de reden zijn voor grote downloads op parallax-scrolling-sites. De Soulreaper-strip is hier een goed voorbeeld van, en ook een goed voorbeeld van het vooraf laden van afbeeldingen en middelen.
Woorden: Josh Chan
Josh Chan is een digitale specialist voor Chromatix, een webdesign- en online marketingbureau in Melbourne, Australië. Webdesign en webinnovatie zijn zijn passies, samen met wat breakdancen in zijn vrije tijd.
Vond dit leuk? Lees deze!
- Hoe een app te bouwen
- Briljante selectie van Wordpress-tutorials
- Ontdek wat de toekomst biedt voor Augmented Reality
Heb je een goed voorbeeld gezien van parallax-scrollen? Laat het ons weten in de comments!
