Je wilt dat je websitebezoekers geboeid zijn, niet verveeld. Om meeslepende ervaringen te creëren die de aandacht trekken en klanten laten scrollen, kun je het parallax-effect gebruiken. Deze websiteontwerp techniek creëert een illusie van diepte door achtergrondelementen met verschillende snelheden te laten bewegen ten opzichte van de voorgrond, waardoor je webpagina dynamisch en levendig aanvoelt.
Parallax scrolling is een van de meest visueel aantrekkelijke trends in webdesign. Hier lees je hoe je je webpagina's van gewoon naar buitengewoon kunt transformeren met dit designeffect.
Wat is parallax scrolling?
Parallax scrolling is een visuele verbetertechniek voor webpagina-ontwerpen. Het maakt gebruik van verschillende lagen, een bewegende voorgrondlaag boven een langzamer achtergrondbeeld, om de pagina een gevoel van 3D-diepte en beweging te geven. Voor het menselijk oog lijkt de voorgrond boven de achtergrond te zweven terwijl gebruikers verticaal of horizontaal scrollen.
Parallax scrolling is geïnspireerd op een multiplane camera, een traditionele animatietechniek die sinds de jaren '30 in films wordt gebruikt. Je herkent het parallax scrolling-effect misschien ook uit computergraphics in vintage videogames, waar langzaam bewegende achtergronden een gevoel van diepte creëren terwijl geanimeerde personages snel in de voorgrond bewegen. Dit is aangepast voor webpagina's, waardoor sitebezoekers worden aangemoedigd om te interageren en meer tijd op de site door te brengen.
Hoe parallax scrolling werkt
Parallax scrolling is gebaseerd op hoe onze ogen afstand waarnemen; objecten die dichterbij zijn, lijken sneller te bewegen dan die verder weg. De sleutel is dat een achtergrondafbeelding statisch of bewegend kan zijn, terwijl de voorgrond beweegt of met een andere snelheid dan de achtergrond beweegt. Door de scrollsnelheid van verschillende contentlagen te manipuleren, kun je een 3D-ervaring simuleren op een tweedimensionaal scherm, wat een optische illusie creëert die de website dynamischer maakt.
Achtergrondafbeeldingen, vaak groter en hoger dan het viewport (het zichtbare deel van de webpagina), bewegen langzamer terwijl je scrollt, waardoor een gevoel van afstand ontstaat. Het effect is vergelijkbaar met hoe een vliegtuig dat een verre landingsbaan nadert langzamer lijkt dan een nabijgelegen auto op de snelweg.
Voorgrondelementen zoals tekst en afbeeldingen bewegen sneller dan de achtergrond, waardoor de illusie ontstaat dat ze dichter bij de kijker zijn.
Hoe je parallax scrolling aan je website toevoegt
- Gebruik een thema met ingebouwde parallax scrolling
- Gebruik codebewerking om parallax scrolling toe te voegen
- Test de bewerkte code op functionaliteit
Als je een parallax scrolling-effect wilt creëren, zijn er twee hoofdbenaderingen: ingebouwde website-thema's en codebewerking. Hier lees je hoe je parallax scrolling op een Shopify-site inschakelt.
Gebruik een thema met ingebouwde parallax scrolling
Als HTML-coderen niet jouw vaardigheid is, is er een eenvoudigere optie. Veel Shopify-thema's bevatten ingebouwde parallax scrolling-effecten.
Begin met het doorbladeren van de Shopify Theme Store voor thema's met parallax scrolling. Gebruik demo-voorbeelden om de functie in actie te zien. Bijvoorbeeld, het Parallax-thema van Out of the Sandbox biedt een demowinkel waar je parallax-effecten kunt uitproberen en de mogelijkheden kunt overwegen.
Na het toevoegen van een thema ga je naar je Shopify-beheerder en bekijk je de aanpassingsopties. Je kunt parallax scrolling-effecten configureren in secties genaamd Parallax, Achtergrondeffecten of Animaties. Veel thema's laten je parallax scrolling voor specifieke gebieden van je website aanpassen.
Gebruik codebewerking om parallax scrolling toe te voegen
Als je vertrouwd bent met een programmeertaal en meer aanpassingsmogelijkheden wilt, is codebewerking een goede optie voor jou en je webdesigner.
Kies eerst de secties van je site voor parallax scrolling, zoals het productpresentatiegebied of de hero-banner. Stel vervolgens de achtergrond- en voorgrondafbeeldingen in. Bereid afbeeldingen voor in hogere resoluties, maar zorg ervoor dat ze geoptimaliseerd zijn voor het web.
Zoek online naar codefragmenten voor parallax scrolling. Bekijk bijvoorbeeld deze parallax scrolling-matches op CodePen. Nadat je een codefragment hebt toegevoegd, bewerk je de themacode in HTML en CSS om de fragmenten op te nemen en pas ze aan voor de specifieke lay-out van jouw website.
Test de bewerkte code op functionaliteit
Zorg ervoor dat alle aanpassingen van websjablonen en codefragmenten compatibel zijn met je thema en grondig zijn getest.
Werkt parallax scrolling goed op verschillende schermformaten en apparaten, vooral mobiele apparaten? Hebben je afbeeldingen lange laadtijden? Dit kan de impact van je animatie-effect verminderen. Optimaliseer afbeeldingen zodat ze sneller laden door onder andere te zorgen dat ze goed zijn geconfigureerd en gecomprimeerd. Parallax-animaties zijn het meest effectief wanneer de gebruiker zich aangetrokken voelt, wat interactie aanmoedigt.
Gebruik het parallax-effect spaarzaam. Overmatig gebruik kan een webpagina rommelig maken. Toeters en bellen zijn leuk, maar het is gemakkelijk om je te laten meeslepen. Het is beter om parallax scrolling selectief toe te passen om specifieke gebieden te laten opvallen.
Voorbeelden van parallax scrolling
Om het gebruik van parallax scrolling en de geschiktheid ervan voor jouw website te begrijpen, verken je verschillende voorbeelden van parallax. Zodra je het effect in actie ziet, herken je het gebruik ervan op talloze parallax scrolling-websites. Bestudeer ze vanuit een functioneel perspectief. Wat zijn de beste parallax-effecten? Hoe betrekken ze gebruikers? Versterkt of verzwakt de beweging de bruikbaarheid? Wat zijn de meest relevante ontwerpmogelijkheden?
Hier zijn drie geweldige parallax scrolling-websites:
Sealaska Heritage
Sealaska Heritage, een non-profitorganisatie die de Tlingit-, Haida- en Tsimshian-cultuur promoot, bezit en beheert de Sealaska Heritage Store, die Alaskaanse inheemse kunst, kleding en producten verkoopt.
De homepage en productcategoriepagina's maken inventief gebruik van parallax scrolling, zowel verticaal als horizontaal. Tekst zweeft over een langzaam bewegende, gesculpteerde vectorafbeelding in gedempte rode tinten, wat een gevoel van beweging en drama creëert. Verder naar beneden toont een horizontaal scrollende diavoorstelling prachtige geschenkobjecten tegen een achtergrondontwerp.
Odio Mimonet
Odio Mimonet is een mode merk dat zich richt op de gemeenschap, gevestigd in Lagos, Nigeria, en gespecialiseerd in chique, functionele ontwerpen voor alle gelegenheden.
De homepage-ervaring begint met een geweldig voorbeeld van een full-width modefoto met een subtiele merkbeschrijving overlay. Terwijl je scrollt, benadrukken foto-achtergronden de uitgelichte secties, vergezeld van zwevende tekst en call-to-action (CTA) knoppen.
Green Beanery
Green Beanery beweert de grootste variëteit aan koffie ter wereld aan te bieden, met 100 verschillende bonen en zes soorten brander.
De website maakt gebruik van een aantrekkelijke web-geoptimaliseerde close-up van gebrande koffiebonen, met een schone, minimalistische tekstoverlay die boven de achtergrond beweegt. Terwijl de gebruikers scrollen, verschijnen er extra close-up afbeeldingen van het merklogo, koffiepot, kopje en bonen, wat de gebruikerservaring verankert en het merkverhaal versterkt.
De semi-transparante bovenste navigatiemenu-balk onthult gedeeltelijk de achtergrondafbeeldingen en tekst eronder.
Veelgestelde vragen over parallax scrolling
Wat doet parallax scrolling?
Parallax scrolling is een webdesigntechniek om diepte aan een webpagina toe te voegen. Terwijl je naar beneden scrollt, lijken achtergrondelementen langzamer te bewegen dan de inhoud op de voorgrond, wat een 3D-effect creëert dat je website dynamischer en boeiender maakt.
Kun je parallax scrolling aan een Shopify-website toevoegen?
Ja. Shopify biedt verschillende manieren om het parallax-effect op je website te bereiken. Gebruik een thema met ingebouwde parallax scrolling-functionaliteit en pas het aan, of bewerk je themacode om het effect toe te voegen. Zoek online naar codefragmenten die je kunt hergebruiken. Vergeet niet om de mobiele vriendelijkheid en de prestaties van de website prioriteit te geven.
Waarom is parallax scrolling een populaire webtrend?
Parallax scrolling maakt scrollen tot een avontuur, waardoor websitebezoekers geboeid blijven en verder willen verkennen. De layering van andere elementen onthult inhoud geleidelijk, als een verhaal. Het is een boeiende manier om de visuele aantrekkingskracht van een website te vergroten en de merkherkenning te verhogen.
