Damian Washington
0 
1353
164
Lange rulleområder har blitt en veldig vanlig trend for webdesign. En av de kuleste undertypene av dette er rulleplassene for parallax, der bilder beveger seg for å gi fra seg en parallakseffekt. Når brukeren ruller nedover siden, blir animasjonene utløst og totalt sett gir det et friskt utseende til ethvert nettsted hvis det blir implementert riktig.
Å lage et parallax-rulleområde er ofte kjedelig fordi det krever inngående kunnskap om CSS, Javascript og god webdesign for å trekke av. Her er en liste over Beste Parallax-rulleprogramtillegg noe som ikke bare gjør det enklere for deg å lage parallax-rulleområder, men også har et godt utstyrt parallax-effektsbibliotek, slik at det blir enklere og raskere for deg å utvikle en fin webside.
ANSVARSFRASKRIVELSE: Før du starter, må du merke deg at for å bruke disse programtilleggene er det nødvendig med litt kunnskap om webteknologier (HTML / CSS / Javascript). De fleste av de listede programtilleggene bruker jquery, så kunnskap om Jquery kan også være nødvendig.
Parallax Scrolling Plugins
1. ScrollMagic
ScrollMagic er en av de mest populære og funksjonsrike jquery-pluginene der ute. Det er et javascript-bibliotek som lar deg lage tilsynelatende magiske rulleeffekter. Ved hjelp av ScrollMagic kan du animere basert på rulleposisjonen. Dette betyr at du kan fikse, flytte eller animere HTML-elementer mens du blar, uansett varighet du vil, og også enkelt legge til parallakseffekter på nettstedet ditt. Den er svært tilpassbar og er også lett (6 kb når den sippes). Blant andre parallax-rulleprogramtillegg har Scroll Magic den beste dokumentasjonen og eksterne ressurser. Den er perfekt kompatibel med mobil også.
ScrollMagic har mange eksempler listet opp. Sjekk dem ut for inspirasjon og veiledning om bruk av dette biblioteket.
Om:
Hjemmeside: http://janpaepke.github.io/ScrollMagic/
Opprettet av: Jan Paepke
Installasjon:
1. CDN:
2. Last ned fra Github
2. skrollr
skrollr er et lett, rent Javascript- og CSS-bibliotek, uten jQuery involvert. Det er i utgangspunktet 'Scroll Magic forenklet for CSS'. For å bruke skrollr, trenger du ikke vite Javascript eller noe jQuery. Bare HTML og CSS er nok. skrollr bruker dataattributter for å animere ethvert HTML-element du ønsker. En av de største ulempene med skrollr er at animasjoner bare fungerer mens siden rulles. Ellers blir alle effekter satt på vent. Med skrollr kan du animere alle CSS-egenskapene til HTML-elementene dine.
Om:
Hjemmeside: http://prinzhorn.github.io/skrollr/
Opprettet av: Prinzhorn
Installasjon: Last ned fra Github
3. pagePiling.js
Page Piling er en jQuery-plugin som lar deg opprette nettstedet ditt i forskjellige seksjoner som hoper seg oppå hverandre. Når du ruller, eller ved å gå inn på URLen, blir hver seksjon avslørt i en ryddig skyve-animasjon. pagePiling.js er kompatibel med alle plattformer - desktop, nettbrett og mobil - og fungerer med de fleste nettlesere. Det degraderer grasiøst på eldre nettlesere som ikke støtter animasjonene (som IE 7). For å bruke plugin-modulen, må du inkludere en CSS og en Javascript-fil i HTML-en. pagePiling.js er initialisert av (dokument). allerede funksjon:
$ (dokument). allerede (funksjon ()
$ ( '# Pagepiling') pagepiling (.);
);
For mer avanserte initialiseringer, gå gjennom README.md.
Om:
Hjemmeside: http://alvarotrigo.com/pagePiling/
Opprettet av: alvarotrigo
Installasjon: Last ned fra Github
4. Alton
Alton er en jQuery 'scroll-jacking to us' plugin. Rullekobling betyr at nettleserens opprinnelige rulle er deaktivert i favør av målrettet rulle som når den blir initiert (av musehjulet eller berøringsflaten) tar deg til neste vertikale punkt på skjermen, eller til toppen av neste beholder.
Alton tillater tre forskjellige typer funksjonalitet, kalt 'Hero', 'Bookend' og 'Standard'. Standard lar deg bruke hel sidescrolling, med hver del av 100% høyde. En rulle viser neste avsnitt eller forrige seksjon. Med Bookend kan du lage en opplevelse av en bokend-type mens Hero lar deg bla bare ut "Hero" -delen, mens resten av siden har (gjenaktivert) innfødt bla..
Om:
Hjemmeside: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Laget av: papirblad
Installasjon: Last ned fra Github
5. Stellar.js
Stellar er en jQuery-plugin som du enkelt kan legge til parallax-rulleeffekter. For å løpe, må du først kjøre $ .stellar () -funksjonen. Animasjonsinnstillinger for individuelle elementer kan konfigureres ved hjelp av dataattributter på det elementet.
Stellar lar deg til og med ha parallaksebakgrunner, som er bakgrunner som omplasseres på bla. En av Stellar.js 'mest nyttige funksjoner er forskyvninger.
Alle elementene vil gå tilbake til sin opprinnelige plassering når forskjøvet foreldre møter kanten av skjermen pluss eller minus ditt eget valgfrie forskyvning. Dette lar deg lage intrikate parallaksemønstre veldig enkelt. (Stellar dokumentasjon)
Om:
Hjemmeside: http://markdalgleish.com/projects/stellar.js/
Opprettet av: Mark Dalgeish
Installasjon: Last ned fra Github
6. multiScroll.js
Denne pluginen er opprettet av den samme utvikleren (alvarotrigo) som har laget sidenPiling.js-plugin. Det flerscreen egentlig gjør er at det lar deg lage en effekt der hver sideseksjon lastes i to delte deler som glir på plass mens siden lastes inn. Sjekk hjemmesiden for å se hvordan dette ser ut i nettleseren din. multiScroll.js lar deg stille inn rullehastighet, lette, rulle alternativ for tastatur og mange flere egenskaper, slik at du kan tilpasse effekten til nøyaktig hvordan du trenger den skal være.
Om:
Hjemmeside: http://alvarotrigo.com/multiScroll/
Opprettet av: alvarotrigo
Installasjon: Last ned fra Github
7. ScrollMe
ScrollMe er et plugin for å legge til enkle parallaks-rulleeffekter på siden din. Det kan skalere, rotere, oversette og endre opaciteten til elementer på siden mens du blar nedover. ScrollMe krever ingen Javascript, og bare CSS-kunnskap er nok. Ved å legge til klassen "animateme" og de nødvendige dataattributtene, kan du animere ethvert HTML-element. ScrollMe brukes best for å legge til CSS-effekter. Det er lett og alle animasjoner er jevne, så lenge du bruker dem i moderasjon.
Om:
Hjemmeside: http://scrollme.nckprsn.com/
Opprettet av: Nick Pearson
Installasjon: Last ned fra Github
8. Parallax Scroll
Parallax Scroll er en brukervennlig jQuery-plugin som lar deg opprette rulleeffekt av parallax-bilder som finnes på nettsteder som Spotify. Det er ganske enkelt å bruke - bare angi de nødvendige CSS-klasser for bildebeholdere. Heller enn å bruke 
Jarallax er et CSS- og Javascript-bibliotek som spesialiserer seg på parallax-rulleeffekter. Jarallax er konfigurert ved hjelp av Javascript (Ingen jQuery, bare ren vanilje JS). Den støtter glatte rullefunksjoner, lette og parallaks-animasjon. Jarallax støttes av de fleste nettlesere, på tvers av plattformer. Jarallax nettstedet har utmerket dokumentasjon på hvordan du kan tilpasse Jarallax etter dine behov. Jarallax har også videoopplæringer som viser hvordan du konfigurerer Jarallax for nettstedet ditt og hvordan du kommer i gang.
Om:
Hjemmeside: http://www.jarallax.com/
Laget av: Jarallax
Installasjon: Last ned fra Jarallax nettsted
10. Superscrollorama
Superscrollorama er en jQuery-basert plugin som støtter rulleanimasjoner. Den drives av TweenMax og Greensock Tweening Engine, noe som øker animasjonsytelsen og glattheten. Superscrollorama-animasjoner kalles via jQuery, og du kan også bruke de fleste TweenMax.js-funksjonene. Dessverre støttes ikke disse animasjonene av mobile enheter (fordi berøringsskjermenheter håndterer rulling på en annen måte). Imidlertid bruker du metoden setScrollContainerOffset, Superscrollorama-effekter på mobile enheter.
Her er koden for å gjøre dette:
.setScrollContainerOffset (x, y)
(x: x forskyvning av rullecontaineren, y: x forskyvning av rullebeholderen)
Om:
Hjemmeside: http://johnpolacek.github.io/superscrollorama/
Opprettet av: johnpolacek
Installasjon: Last ned fra Github
SE OGSÅ: 10 beste statiske nettstedgeneratorer