Webontwerp Inspiratie scrollen, scrollen, scrollen

Webbrowsers hebben allemaal één ding gemeen: bijna zonder uitzondering laten ze ons door de inhoud scrollen. Scrollen brengt ons van de bovenkant van een document naar de bodem. Maar het biedt veel meer dan dat - en voor het goede of slechte, daagden webontwerpers al enige tijd de schuifbalk uit om te zien hoe het anders kan worden gebruikt om te communiceren met het web..

Zoals gebruikelijk in deze inspiratieposten; we gaan enkele voorbeelden in het wild bekijken, enkele van de gebruikte technieken onderzoeken, naar enkele handleidingen en cursussen verwijzen om je te helpen ontdekken wat we vinden, en enkele inspirerende voorbeelden op Envato Market opsommen.

Inspiratie

We beginnen met forbetter.coffee (tien punten voor de URL) die begint met een koffieboon en vervolgens de voortgang van de pagina volgt wanneer deze wordt gemalen, geparseerd en in een koffiekopje wordt gegoten.

Begin hier, scroll vervolgens ...

Dit is in de geest van het klassieke scrolling-voorbeeld lostworldsfairs.com. De positie van de koffieboon is vast overal, dus het blijft in de browser staan ​​terwijl de achtergrond voorbij scrolt. Uiteindelijk ontmoet het bepaalde waypoints, waarna zijn positie wordt gewijzigd in familielid en het scrollt aan de bovenkant van het scherm, alleen om te worden vervangen door verschillende elementen. Dit alles gebeurt met scrollmagic.io.

Susan Lin gebruikt een vergelijkbaar effect (hoewel een geheel andere esthetiek) op haar persoonlijke homepage. Maak je klaar om je nostalgisch te voelen over 8-bits rollenspellen als Susan's sprite door het gepixeleerde landschap naar beneden waggelt:

Bereid je voor op een gedetailleerde tutorial over hoe dit snel wordt bereikt!

www.voog.com gebruikt scrollen naar een ander effect. De gesplitste lay-out combineert heldere kleuren en wisselt achtergrondafbeeldingen uit, gefixeerd in hun gemaskeerde posities.

Dit wordt allemaal gedaan met JavaScript, hoewel je een zeer vergelijkbaar gemaskeerd achtergrondeffect kunt bereiken, zoals aangetoond door Kezz Bracey, met niets anders dan CSS.

Parallax

Hoe zijn we zover gekomen zonder parallax te noemen ?! Laten we dat nu oplossen, met hulp van @claudioguglieri. Bekijk zijn startpagina, die begint met een mooi gepresenteerde open brief. Scroll naar beneden en ervaar de diepte die wordt voorgesteld door bladeren en rozenblaadjes terwijl ze voorbij drijven:

www.guglieri.com

Meer subtiele parallax is te vinden op sublime.fyi; een samengestelde verzameling van ontwerpgesprekken en interviews door enkele zeer herkenbare figuren. Scroll naar beneden en zie lagen van duotoonafbeeldingen en afbeeldingen voorbijvliegen:

Firewatch is verbluffend. Prachtig in de geverfde graphics van het spel, in het concept, in de marketing. En de website volgt het voorbeeld. Scroll naar beneden om een ​​gevoel van diepte en omgeving te krijgen, en schaal ook, terwijl je krimpt in relatie tot het landschap.

Het volgende voorbeeld is een beetje anders, omdat de schuifpositie van het venster wordt gebruikt om een ​​heel klein detail te beïnvloeden. frankbody.com heeft een menupaneel dat linksboven in het kijkvenster blijft steken en tijdens het scrollen verandert het achtergrondpatroon subtiel.

eu.frankbody.com

Het JavaScript (of beter gezegd jQuery) erachter is als volgt:

// functie geactiveerd bij venster scrollen $ (window) .on ('scroll', function () // bewaar de huidige verticale positie van de schuifbalk var scroll_top = $ (window) .scrollTop (); // verander inline css regel, gebaseerd op de factor van scroll_top $ ('. menu'). css ('background-position-y', scroll_top * -.1););

Voel je vrij om dit uit elkaar te halen in dit voorbeeld:

Envato Market

Laten we enkele inspirerende scroll-thema's en -sjablonen te koop bekijken op Themeforest.

Zoo - Responsive One Page Parallax ThemeStartuply - Multi-Purpose Startup ThemeBorderland - Een gedurfd multi-concept-themaScroller - Parallax, Scroll & Responsive ThemeROSA - Een voortreffelijk restaurant WordPress-thema

Meer informatie over scrollen-evenementen

Als je geïnteresseerd bent in het maken van je eigen scrollende meesterwerken, bekijk dan Craig Campbell's recente cursus Scroll Events Made Easy. Hierin leer je over de basisprincipes van scroll-gebeurtenissen en vervolgens bouw je verschillende voorbeelden met behulp van bestaande bibliotheken zoals parallax.js, wow.js en skrollr.js. Grijp deze cursus voor $ 9.

Lees daarnaast Parallax Scrolling for Web Design om uw leerproces af te ronden.

Problemen met het renderen van prestatieproblemen oplossen

Als je speelt met scrollen en positioneren, speel je mogelijk in potentie met de mogelijkheid van de browser om de scène opnieuw te schilderen. In deze geweldige snelle tip van Harry Roberts demonstreert hij enkele probleemoplossing bij het gebruik van de browserinspector.

Je hebt de bodem bereikt

Dat is het voor deze inspiratieronde, zie je in de volgende!