Parallax-scrollen gemakkelijk gemaakt met StickyStack.js

Parallax-effecten trek snel de aandacht. Deze effecten Houd bepaalde achtergronden in het oog tijdens het scrollen op de pagina. Parallax scrollen vindt u op veel websites en WordPress-thema's en ze vormen een groot deel van het moderne webdesign.

Je kunt ook een bouwen unieke parallaxstijl de ... gebruiken StickyStack.js inpluggen. Haar gebouwd op jQuery en houdt elke hoofdpaginasectie aan de top als je naar beneden scrolt.

Dit maakt de illusie van een gelaagde website waar elke pagina “stacks” op de andere. Het is echt cool en vrij eenvoudig om zelf in te stellen.

Hoewel het vrij eenvoudig is om in te stellen, vereist het enig begrip van de ontwikkeling van de frontend.

Je moet eerst maak afzonderlijke paginasecties aan in de hoofdcontainer. Op deze manier heb je alles ingesloten in de HTML, zodat je alles kunt richten met de jQuery-functie StickyStack.

Het komt ook met een paar opties waar u de kunt aanpassen oudercontainer, de elementen die moeten worden gestapeld, en een mogelijk vak schaduw als je dat effect leuk vindt.

Hier is een sample stukje code van de GitHub-pagina:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '.main-content-wrapper', stackingElement: 'sectie', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0.25)' ); 

Hoewel dit niet is bijgewerkt in ongeveer twee jaar, is het nog steeds een zeer betrouwbare plug-in. Het werkte in alle browsers die ik heb getest (Chrome, Safari en Firefox) met ondersteuning voor alle versies van jQuery.

Plus, het verkleinde bestand is slechts 2KB wat een behoorlijke maat is voor een plug-in.

Ga voor meer informatie naar de hoofdrepo en zie wat StickyStack kan bieden. Ik denk dat het het beste werkt websites met één pagina of bestemmingspagina's met grote achtergronden op volledig scherm.

U kunt ook een bezoek brengen aan a live demo op CodePen als je wilt zien hoe dit eruit ziet op een live site.