The parallax scrolling effect is a design technique that’s relatively new in development and web design. Over the past few years since it’s hit the scene though, it’s grown pretty popular in its own right, and with good reason, too.
Definitie van parallax scrolling
Parallax scrolling is a technique wherein your web page’s background image scrolls at a slower rate compared to the foreground image. It gives the user a unique sense of depth and action while scrolling through a page when used on a website.
Without Parallax Scrolling
The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.
With Parallax Scrolling
The background image scrolls at a different rate as the rest of the elements in the page.
De impact van parallax scrolling op de gebruiker
De techniek is echter niet bepaald nieuw en werd al in de jaren 1920 in traditionele animatie gebruikt. Het is ook gebruikt in veel klassieke videogames, zoals de Super Mario brothers.
Op het gebied van webdesign wordt Nike echter vaak gezien als een van de eerste die parallax scrolling gebruikte in 2011. Sindsdien is de term “parallax scrolling” (soms “parallax-achtergrond(en)” genoemd) een veelgebruikt begrip geworden onder zowel ontwerpers als ontwikkelaars, waarvan de populariteit gestaag toeneemt.
Parallax scrolling as used in a version of Super Mario Brothers. Notice how the hills in the background move
in slightly varying speeds, as compared to Mario and the other characters in the foreground.
Wat levert het de gebruiker op
Het geweldige aan dit effect is dat het gebruikers aanzet tot interactie met je website, waardoor zowel de gebruikersinteractie als de aantrekkingskracht toeneemt. En mits goed uitgevoerd, kan parallax scrolling zelfs de eenvoudigste websites tot leven brengen. Het kan zelfs worden gebruikt om verbluffende verhalen te creëren die alle bezoekers van de site direct weten te boeien.
Deel je werk met ons!
Dus wat vinden jullie ervan? Hebben jullie de nieuwste parallax-achtergrondfunctie van PBS v4 al gebruikt? Werkt het in je voordeel? Deel gerust een link naar je werk of laat enkele suggesties achter in het reactiegedeelte hieronder.
Veel plezier met het bouwen van je site!