WEBSITE ONTWERP
Wat is parallax scrollen?
Parallax scrollen is een grafische techniek voor webontwerp waarbij de achtergrondafbeeldingen langzamer bewegen dan de voorgrond, waardoor de illusie ontstaat van een diepte-3D-effect terwijl bezoekers over de webpagina scrollen. De techniek is voortgekomen uit de meervlakscameratechniek die sinds de jaren dertig in traditionele animatie wordt gebruikt.
Parallax is gebaseerd op optische illusie. Omdat het menselijk oog objecten dichtbij ons als groter waarneemt dan dingen verder weg, nemen we verre objecten waar alsof ze langzamer bewegen.
De illusie is al lang in parallax overgenomen via verschillende media, wat een realistisch effect bevordert. Het eerste gebruik ervan was in traditionele animatie, die teruggaat tot Disney's Sneeuwwitje en de Zeven Dwergen, en in videogames zoals Super Mario.
Met verbeteringen in CSS en HTML evolueerden parallaxeffecten later naar de wereld van webdesign zoals we die nu kennen.
Parallax scrollen is een speciale scrolltechniek die wordt gebruikt bij webontwerp, waarbij achtergrondafbeeldingen op een webpagina langzamer bewegen dan voorgrondafbeeldingen, waardoor een illusie van diepte ontstaat op een tweedimensionale site.
Het is momenteel een van de meest gebruikte ontwerptechnieken in webdesign, maar ook iets waarvan je waarschijnlijk niet eens beseft dat je het al hebt ervaren.
Het is een eenvoudige beweging waar u al aan gewend bent en die ervoor heeft gezorgd dat veel websites dynamisch en interactief aanvoelen.
Als u ervoor kiest om het te gebruiken, is het belangrijk om te brainstormen over de manier waarop parallax ook de mobiele ervaring kan beïnvloeden. Om de sitesnelheid te verhogen en niet te veel inbreuk te maken op de mobiele bruikbaarheid, wordt doorgaans geadviseerd om parallax-scrollen te verminderen of volledig te verwijderen.
Denk eraan om alle gevallen te bedenken waarin u het mogelijk eerst wilt gebruiken en hoe het moet worden aangepast voor gebruikers op meerdere apparaten.
Lees meer hier.
Extra koppeling:
[optin-monster slug=”em8z7q6hga9elmy1dbgb”]