Damian Washington
0 
2428
11
Långa rullningssidor har blivit en riktigt vanlig webbdesigntrend. En av de coolaste deltyperna av detta är parallaxrullningsplatserna, där bilder rör sig för att avge en parallaxeffekt. När användaren bläddrar ner på sidan utlöses animationerna och totalt sett ger det ett nytt utseende och känsla för alla webbplatser om de implementeras korrekt.
Att skapa en parallax-rullande webbplats är ofta tråkig eftersom det kräver djup kunskap om CSS, Javascript och bra webbdesign för att dra igång. Här är en lista över Bästa Parallax-rullningsprogram vilket inte bara gör det enklare för dig att skapa sidor med parallax, utan också har ett välbegripet parallaxeffektbibliotek så att det blir lättare och snabbare för dig att utveckla en snygg webbsida.
VARNING: Innan du börjar bör du notera att för att använda dessa plugins krävs viss kunskap om webbteknologi (HTML / CSS / Javascript). De flesta av de listade pluginsna använder jquery, så kännedom om Jquery kan också behövas.
Parallax Scrolling Plugins
1. ScrollMagic
ScrollMagic är en av de mest populära och funktionsrika jquery-plugins som finns där. Det är ett javascript-bibliotek som du kan skapa till synes magiska rullningseffekter. Med ScrollMagic kan du animera baserat på din rullningsposition. Detta betyder att du kan fixa, flytta eller animera HTML-element när du bläddrar, oavsett varaktighet du vill, och också enkelt lägga till parallaxeffekter på din webbplats. Den är mycket anpassningsbar och är också lätt (6 kb när den släpps). Bland andra parallax-scroll-plugins har Scroll Magic den bästa dokumentationen och externa resurser. Den är perfekt kompatibel med mobil också.
ScrollMagic har många exempel listade. Kolla in dem för inspiration och vägledning om hur du använder detta bibliotek.
Handla om:
Hemsida: http://janpaepke.github.io/ScrollMagic/
Skapad av: Jan Paepke
Installation:
1. CDN:
2. Ladda ner från Github
2. skrollr
skrollr är ett lätt Javascript- och CSS-bibliotek utan viktiga jQuery. Det är i princip "Scroll Magic förenklad för CSS". För att använda skrollr behöver du inte känna till Javascript eller något jQuery. Bara HTML och CSS räcker. skrollr använder dataattribut för att animera alla HTML-element du vill ha. En av de största nackdelarna med skrollr är att animationer bara fungerar medan sidan rullas. Annars läggs alla effekter på. Med skrollr kan du animera alla CSS-egenskaper för dina HTML-element.
Handla om:
Hemsida: http://prinzhorn.github.io/skrollr/
Skapad av: Prinzhorn
Installation: Ladda ner från Github
3. pagePiling.js
Page Piling är ett jQuery-plugin som låter dig skapa din webbplats i olika sektioner som staplar ovanpå varandra. När du bläddrar, eller genom att komma åt URL: en, avslöjas varje sektion i en snygg glidande animering. pagePiling.js är kompatibel med alla plattformar - stationär, surfplatta och mobil - och fungerar med de flesta webbläsare. Det försämras graciöst på äldre webbläsare som inte stöder dess animationer (som IE 7). För att använda plugin måste du inkludera en CSS och en Javascript-fil i din HTML. pagePiling.js initieras av (dokument) .ready-funktion:
$ (dokument). redan (funktion ()
$ (# Pagepiling) pagepiling ().
);
För mer avancerade initialiseringar, gå igenom README.md.
Handla om:
Hemsida: http://alvarotrigo.com/pagePiling/
Skapad av: alvarotrigo
Installation: Ladda ner från Github
4. Alton
Alton är en jQuery 'scroll-jacking to us'-plugin. Scrolljacking innebär att webbläsarens ursprungliga bläddring är inaktiverad för riktad rullning som när den initieras (med mushjulet eller pekplattan) tar dig till nästa vertikala punkt på skärmen eller till toppen av nästa behållare.
Alton tillåter tre olika typer av funktioner, kallad 'Hero', 'Bookend' och 'Standard'. Standard låter dig använda rullning på hela sidan, med varje avsnitt av 100% höjd. En rullning visar nästa avsnitt eller föregående avsnitt. Med Bookend kan du skapa en upplevelse av det bokändande medan Hero tillåter dig att bläddra jack endast i "Hero" -sektionen, medan resten av sidan har (återaktiverat) inbyggd rullning.
Handla om:
Hemsida: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Skapad av: pappersblad
Installation: Ladda ner från Github
5. Stellar.js
Stellar är ett jQuery-plugin genom vilket du enkelt kan lägga till parallax-rullningseffekter. För att köra måste du först köra funktionen $ .stellar (). Animeringsinställningar för enskilda element kan konfigureras med dataattribut på det elementet.
Med Stellar kan du till och med ha parallaxbakgrunder, som är bakgrunder som flyttar på rullningen. En av Stellar.js mest användbara funktioner är offset.
Alla element kommer att återgå till sin ursprungliga positionering när deras förskjutna förälder möter kanten på skärmen plus eller minus din egen valfri offset. Detta gör att du kan skapa intrikata parallaxmönster mycket enkelt. (Stellar dokumentation)
Handla om:
Hemsida: http://markdalgleish.com/projects/stellar.js/
Skapad av: Mark Dalgeish
Installation: Ladda ner från Github
6. multiScroll.js
Detta plugin skapas av samma utvecklare (alvarotrigo) som skapade plugin pagePiling.js. Vad flerscroll egentligen gör är att det låter dig skapa en effekt där varje sidavsnitt laddas i två uppdelade delar som glider på plats när sidan laddas. Kolla in hemsidan för att se hur det ser ut i din webbläsare. multiScroll.js låter dig ställa in rullningshastighet, lättnad, alternativ för rullning av tangentbord och många fler egenskaper så att du kan anpassa effekten till exakt hur du behöver den ska vara.
Handla om:
Hemsida: http://alvarotrigo.com/multiScroll/
Skapad av: alvarotrigo
Installation: Ladda ner från Github
7. ScrollMe
ScrollMe är ett plugin för att lägga till enkla parallax-rullningseffekter på din sida. Det kan skala, rotera, översätta och ändra opaciteten för element på sidan när du bläddrar nedåt. ScrollMe kräver inget Javascript, och bara CSS-kunskap räcker. Genom att lägga till klassen "animateme" och de nödvändiga dataattributen kan du animera alla HTML-element. ScrollMe används bäst för att lägga till CSS-effekter. Det är lätt och alla animationer är smidiga, så länge du använder dem i mått.
Handla om:
Hemsida: http://scrollme.nckprsn.com/
Skapad av: Nick Pearson
Installation: Ladda ner från Github
8. Parallax Scroll
Parallax Scroll är en lättanvänd jQuery-plugin som låter dig skapa parallax-bildrullningseffekten som finns på webbplatser som Spotify. Det är ganska enkelt att använda - ange bara de CSS-klasser som krävs för bildinnehavarna. Snarare än att använda 
Jarallax är ett CSS- och Javascript-bibliotek som är specialiserat på parallax-rullningseffekter. Jarallax konfigureras med Javascript (Ingen jQuery, bara ren vanilj JS). Det stöder utjämnade rullningsfunktioner, lättnad och parallaxanimering. Jarallax stöds av de flesta webbläsare över plattformar. Jarallax webbplats har utmärkt dokumentation om hur du kan anpassa Jarallax för dina behov. Jarallax har också videohandledning som visar hur man ställer in Jarallax för din webbplats och hur du kommer igång.
Handla om:
Hemsida: http://www.jarallax.com/
Skapad av: Jarallax
Installation: Ladda ner från Jarallax webbplats
10. Superscrollorama
Superscrollorama är ett jQuery-baserat plugin som stöder rullningsanimationer. Den drivs av TweenMax och Greensock Tweening Engine, vilket ökar animationsprestanda och smidighet. Superscrollorama-animationer kallas via jQuery, och du kan använda de flesta TweenMax.js-funktioner också. Tyvärr stöds inte dessa animationer av mobila enheter (eftersom pekskärmsenheter hanterar rullning på ett annat sätt). Men med metoden setScrollContainerOffset kan Superscrollorama-effekter nås på mobila enheter.
Här är koden för att göra detta:
.setScrollContainerOffset (x, y)
(x: bläddringsbehållarens x-förskjutning, y: förskjutningsbehållarens x-förskjutning)
Handla om:
Hemsida: http://johnpolacek.github.io/superscrollorama/
Skapad av: johnpolacek
Installation: Ladda ner från Github
SE Också: 10 bästa statiska webbplatsgeneratorer