Gadgetshowto
Långa rullningswebbplatser har blivit en riktigt vanlig trend för webbdesign. En av de coolaste undertyperna till detta är parallax-rullningsplatserna, där bilder rör sig för att ge en parallaxeffekt. När användaren rullar ner på sidan, aktiveras animationerna och totalt sett ger det en ny look och känsla för alla webbplatser om de implementeras korrekt.
Att göra en parallax-rullningswebbplats är ofta tråkig eftersom det kräver fördjupad kunskap om CSS, Javascript och bra webbdesign för att få fram. Här är en lista över Bästa Parallax-rullningsprogrammen som inte bara gör det lättare för dig att skapa parallax-rullningssidor utan också har ett välutrustat parallaxeffektbibliotek så att det blir lättare och snabbare för dig att utveckla en snygg webbsida.
VARNING: 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 rullningsprogram
1. ScrollMagic
ScrollMagic är en av de mest populära och funktionsrika jquery-pluginsna där ute. Det är ett javascript-bibliotek som låter dig skapa till synes magiska rullningseffekter. Med ScrollMagic kan du animera baserat på din rullningsposition. Det betyder att du kan fixa, flytta eller animera HTML-element när du rullar, oavsett hur länge du vill, och även enkelt lägga till parallaxeffekter på din webbplats. Den är mycket anpassningsbar och är också lätt (6 kb när den är zippad). Bland andra parallax-scroll-plugins har Scroll Magic den bästa dokumentationen och externa resurser. Det är också perfekt kompatibelt med mobilen.
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, rent Javascript- och CSS-bibliotek, utan jQuery inblandat. Det är i grunden "Scroll Magic förenklat för CSS". För att använda skrollr behöver du inte känna till Javascript eller någon jQuery. Bara HTML och CSS räcker. skrollr använder dataattribut för att animera vilket HTML-element du vill. En av de största nackdelarna med skrollr är att animationer bara fungerar medan sidan rullas. Annars sätts alla effekter i väntan. skrollr låter dig 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 rullar, eller genom att komma åt webbadressen, avslöjas varje avsnitt i en snygg glidande animation. pagePiling.js är kompatibel med alla plattformar - stationär, surfplatta och mobil - och fungerar med de flesta webbläsare. Det försämras elegant på äldre webbläsare som inte stöder dess animationer (som IE 7). För att kunna använda plugin-programmet måste du inkludera en CSS- och en Javascript-fil i din HTML. pagePiling.js initialiseras av (dokument). redan funktion:
$ (dokument). klar (funktion ()
$ ('# sidpiling'). 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 ett jQuery-plugin 'scroll-jacking to us'. Scroll jacking innebär att din webbläsares inbyggda rullning är inaktiverad till förmån 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, kallade 'Hero', 'Bookend' och 'Standard'. Standard låter dig använda helsidesrullning, med varje sektion med 100% höjd. En rullning ger nästa avsnitt eller föregående avsnitt. Med bokänden kan du skapa en bokupplevelse medan Hero låter dig bläddra endast i "Hero" -avsnittet, medan resten av sidan har (återaktiverat) inbyggd rullning.
Handla om:
Hemsida: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Skapad av: paper-leaf
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 $ .stellar () -funktionen. Animeringsinställningar för enskilda element kan konfigureras med hjälp av dataattribut på det elementet.
Med Stellar kan du till och med ha parallaxbakgrunder, vilka är bakgrunder som omplaceras på rullning. En av Stellar.js mest användbara funktioner är förskjutningar.
Alla element återgår till sin ursprungliga position när deras offsetförälder möter kanten på skärmen plus eller minus din egen valfria offset. Detta gör att du enkelt kan skapa invecklade parallaxmönster. (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-programmet pagePiling.js. Vad multi scroll egentligen gör är att det låter dig skapa en effekt där varje sidavsnitt laddas i två delade delar som glider på plats när sidan laddas. Kolla in hemsidan för att se hur detta ser ut i din webbläsare. multiScroll.js låter dig 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 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 opacitet för element på sidan när du rullar ner. ScrollMe kräver inget Javascript, och endast CSS-kunskap räcker. Genom att lägga till klassen "animateme" och de nödvändiga dataattributen kan du animera vilket HTML-element som helst. 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 med måtta.
Handla om:
Hemsida: http://scrollme.nckprsn.com/
Skapad av: Nick Pearson
Installation: Ladda ner från Github
8. Parallax bläddra
Parallax Scroll är ett lättanvänt 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 bildhållarna. Snarare än att använda taggar, för att använda detta plugin måste du använda element som har en bakgrundsbild specificerad (med CSS-egenskapen 'bakgrundsbild'. Du kan göra elementen responsiva med CSS @media-frågor.
Handla om:
Hemsida: http://parallax-scroll.aenism.com/
Skapad av: Aen
Installation: Ladda ner från Github
9. Jarallax
Jarallax är ett CSS- och Javascript-bibliotek som specialiserar sig på parallax-rullningseffekter. Jarallax konfigureras med Javascript (Ingen jQuery, bara ren vanilj JS). Den 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 anpassar Jarallax efter dina behov. Jarallax har också videohandledning som visar hur du 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 jämnhet. Superscrollorama-animationer anropas via jQuery, och du kan också använda de flesta TweenMax.js-funktionerna. Tyvärr stöds inte dessa animationer fullt ut av mobila enheter (eftersom pekskärmsenheter hanterar rullning på ett annat sätt). Men med setScrollContainerOffset-metoden kan Superscrollorama-effekter nås på mobila enheter.
Här är koden för att göra detta:
.setScrollContainerOffset (x, y)
(x: x-offset för scrollcontainer, y: x-offset för scrollcontainer)
Handla om:
Hemsida: http://johnpolacek.github.io/superscrollorama/
Skapad av: johnpolacek
Installation: Ladda ner från Github
SE OCH: 10 bästa statiska generatorer
