Långa rullningsplatser har blivit en riktigt vanlig webbdesigntendens. En av de coolaste deltyperna här är parallaxrullningsplatserna, där bilder rör sig för att ge en parallax-effekt. När användaren rullar ner på sidan avbryts animationerna och totalt ger det ett nytt utseende och känsla till vilken webbplats som helst, om den genomförs korrekt.
Att göra en parallax rullning webbplats är ofta tråkigt eftersom det kräver djup kännedom om CSS, Javascript och bra webbdesign att dra av. Här är en lista över de bästa Parallax Scrolling-pluggarna som inte bara gör det enklare för dig att skapa parallaxrullningsplatser, men också ha ett välutrustat parallaxffekterbibliotek så att det blir enklare och snabbare för dig att utveckla en snygg webbsida .
DISCLAIMER : Innan du börjar, notera att för att använda dessa plugins krävs viss kunskap om webbteknik (HTML / CSS / Javascript). De flesta av de listade pluginsna använder jquery, så kunskap om Jquery kan också behövas.
Parallax Scrolling Plugins
1. ScrollMagic
ScrollMagic är en av de mest populära och funktionrika jquery-pluginsna där ute. Det är ett javascriptbibliotek som låter dig skapa till synes magiska rullningseffekter. Med ScrollMagic kan du animera baserat på din rullningsläge. Det innebär att du kan fixa, flytta eller animera HTML-element som du bläddrar, oavsett vilken längd du vill, och lägg även enkelt till parallella effekter på din webbplats. Den är mycket anpassningsbar och är också lättviktig (6kb vid gzipped). Bläddra bland andra parallellbläddringsprogram, Scroll Magic har den bästa dokumentationen och externa resurser. Den är perfekt kompatibel med mobilen också.
ScrollMagic har många exempel på listan. Kolla in dem för inspiration och vägledning om hur du använder det här biblioteket.
Handla om:
Hemsida: //janpaepke.github.io/ScrollMagic/
Skapat av: Jan Paepke
Installation:
1. CDN:
2. Hämta från Github
2. skrollr
skrollr är ett lättviktigt rent Javascript och CSS-bibliotek, utan jQuery involverad. Det är i princip "Scroll Magic förenklat för CSS". För att använda skrollr behöver du inte Javascript eller någon jQuery. Bara HTML och CSS är tillräckligt. skrollr använder dataattribut för att animera vilket HTML-element du vill ha. En av de största nackdelarna med skrollr är att animationer bara fungerar medan sidan rullas. Annars sätts alla effekter på håll. skrollr låter dig animera alla CSS-egenskaper hos dina HTML-element.
Handla om:
Hemsida: //prinzhorn.github.io/skrollr/
Skapat av: Prinzhorn
Installation: Hämta 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 rullar, eller genom att komma åt webbadressen, visas varje sektion i en snygg glidande animering. pagePiling.js är kompatibel med alla plattformar - skrivbord, surfplatta och mobil - och fungerar med de flesta webbläsare. Det bryts graciöst på äldre webbläsare som inte stöder dess animeringar (som IE 7). För att kunna använda plugin måste du inkludera en CSS och en Javascript-fil i din HTML. pagePiling.js initieras av (dokument) .ready funktion:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
För mer avancerade initieringar, gå igenom README.md.
Handla om:
Hemsida: //alvarotrigo.com/pagePiling/
Skapat av: alvarotrigo
Installation: Hämta från Github
4. Alton
Alton är en jQuery "plug-jacking till oss" plugin. Scroll jacking innebär att din webbläsarens inbyggda rullning är avaktiverad för att rikta in målning, vilket när du initierat (med mushjulet eller pekplattan) tar dig till nästa vertikala punkt på skärmen eller på toppen av nästa behållare.
Alton tillåter tre separata funktioner, kallad "Hero", "Bookend" och "Standard". Standard tillåter dig att använda fullbläddring, med varje sektion på 100% höjd. En rullning frambringar nästa sektion eller föregående avsnitt. Bookend låter dig skapa en bokningstypisk upplevelse medan hjälten tillåter dig att rulla bara "Hero" -delen med resten av sidan med (återaktiverad) inbyggd rullning.
Handla om:
Hemsida: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Skapat av: pappersblad
Installation: Hämta från Github
5. Stellar.js
Stellar är ett jQuery-plugin genom vilken du enkelt kan lägga till parallella 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 här elementet.
Stellar jämn kan du ha parallaxbakgrunder, som är bakgrunder som flyttas på rullning. En av Stellar.js mest användbara funktioner är förskjutningar.
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 valfria förskjutning. Detta gör att du enkelt kan skapa invecklade parallaxmönster. (Stellär dokumentation)
Handla om:
Hemsida: //markdalgleish.com/projects/stellar.js/
Skapat av: Mark Dalgeish
Installation: Hämta från Github
6. multiScroll.js
Denna plugin skapas av samma utvecklare (alvarotrigo) som gjorde pluggen pagePiling.js. Vilken flerskroll som helst gör det, det låter dig skapa en effekt där varje sidavdelning laddas i två delade 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 kan du ställa in rullningshastighet, lättnad, tangentbordsrullningsalternativ och många fler egenskaper så att du kan anpassa effekten till exakt hur du behöver den.
Handla om:
Hemsida: //alvarotrigo.com/multiScroll/
Skapat av: alvarotrigo
Installation: Hämta från Github
7. ScrollMe
ScrollMe är ett plugin för att lägga till enkla parallaxrulleeffekter till din sida. Det kan skala, rotera, översätta och ändra opacitet av element på sidan, när du rullar ner. ScrollMe kräver ingen Javascript, och endast CSS kunskap är tillräckligt. Genom att lägga till klassen "animateme" och en nödvändig data attribut kan du animera något HTML-element. ScrollMe används bäst för att lägga till CSS-effekter. Det är lätt och alla animationer är släta, så länge du använder dem i mått.
Handla om:
Hemsida: //scrollme.nckprsn.com/
Skapat av: Nick Pearson
Installation: Hämta från Github
8. Parallax Scroll
Parallax Scroll är ett lättanvänt jQuery-plugin som låter dig skapa parallax image scroll-effekt som finns på webbplatser som Spotify. Det är ganska enkelt att använda - ange bara de nödvändiga CSS-klasserna för bildinnehavarna. Snarare än att använda taggar, för att använda det här pluginet måste du använda element som har en angiven bakgrundsbild (med hjälp av CSS-egenskapen `bakgrundsbild`. Du kan göra elementen lyhörda med hjälp av CSS @media-frågor.
Handla om:
Hemsida: //parallax-scroll.aenism.com/
Skapat av: Aen
Installation: Hämta från Github
9. Jarallax
Jarallax är ett CSS- och Javascript-bibliotek som specialiserar sig i parallell scrollningseffekter. Jarallax är konfigurerad med Javascript (No jQuery, bara ren vanilj JS). Den stöder smidiga rullningsfunktioner, lättnad och parallaxanimering. Jarallax stöds av de flesta webbläsare, över plattformar. Jarallax webbplats har utmärkt dokumentation om hur man anpassar Jarallax till dina behov. Jarallax har också videoprojekt som visar hur du installerar Jarallax för din webbplats och hur du kommer igång.
Handla om:
Hemsida: //www.jarallax.com/
Skapat 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 jämnhet. Superscrollorama-animationer kallas via jQuery, och du kan också använda de flesta TweenMax.js-funktionerna. Tyvärr stöds inte dessa animeringar av mobila enheter (eftersom pekskärmsenheter hanterar rullning på ett annat sätt). Men med hjälp av metoden setScrollContainerOffset kan du få tillgång till Superscrollorama-effekter på mobila enheter.
Här är koden för att göra detta:
.setScrollContainerOffset(x, y)
(x: x-förskjutningen av rullbehållaren, y: rullskärmens x-offset)
Handla om:
Hemsida: //johnpolacek.github.io/superscrollorama/
Skapat av: johnpolacek
Installation: Hämta från Github
SE ÄVEN: 10 Bästa Static Site Generators
