Long scrolling nettsteder har blitt en veldig vanlig webdesign trend. En av de kuleste deltypene av dette er parallax-rullingsstedene, hvor bilder beveger seg for å gi en parallax-effekt. Når brukeren ruller nedover siden, blir animasjonene utløst og generelt gir det et nytt utseende og følelse til et hvilket som helst nettsted dersom det implementeres riktig.
Å lage et parallaxrulleområde er ofte kjedelig fordi det krever inngående kunnskap om CSS, Javascript og et godt webdesign for å trekke av. Her er en liste over Best Parallax Scrolling Plugins som ikke bare gjør det enklere for deg å lage parallax-rullingssteder, men har også et velutstyrt parallax-effekter bibliotek slik at det blir enklere og raskere for deg å utvikle en flott webside .
DISCLAIMER : Før du begynner, merk at det er nødvendig med noen kunnskaper om webteknologi (HTML / CSS / Javascript) for å bruke disse pluginene. De fleste av de listede plugins 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 funksjonrike jquery-plugins der ute. Det er et javascriptbibliotek som lar deg lage tilsynelatende magiske rulleffekter. Ved hjelp av ScrollMagic kan du animere basert på rullestilling. Dette betyr at du kan fikse, flytte eller animere HTML-elementer mens du ruller, uansett hvilken varighet du vil ha, og du kan også legge til parallaxeffekter på nettstedet ditt. Den er svært tilpassbar og er også lett (6kb når gzipped). Blant annet parallax-blinde plugins har Scroll Magic den beste dokumentasjonen og eksterne ressurser. Den er perfekt kompatibel med mobil også.
ScrollMagic har mange eksempler på listen. Sjekk dem ut for inspirasjon og veiledning om bruk av dette biblioteket.
Handle om:
Hjemmeside: //janpaepke.github.io/ScrollMagic/
Laget 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 Javascript eller noen jQuery. Bare HTML og CSS er nok. skrollr bruker dataattributter for å animere ethvert HTML-element du vil ha. En av de største ulempene ved skrollr er at animasjonene bare fungerer mens siden rulles. Ellers blir alle effekter satt på vent. skrollr lar deg animere alle CSS-egenskapene til HTML-elementene dine.
Handle om:
Hjemmeside: //prinzhorn.github.io/skrollr/
Laget av: Prinzhorn
Installasjon: Last ned fra Github
3. pagePiling.js 
Page Piling er et jQuery-plugin som lar deg lage nettstedet ditt i forskjellige seksjoner som hoper seg oppå hverandre. Når du ruller, eller ved å få tilgang til nettadressen, blir hver seksjon åpenbar i en fin glidende animasjon. pagePiling.js er kompatibel med alle plattformer - skrivebord, nettbrett og mobil - og fungerer sammen med de fleste nettlesere. Det brytes grasiøst på eldre nettlesere som ikke støtter animasjonene (som IE 7). For å bruke pluginet må du inkludere et CSS og en Javascript-fil inne i HTML-en. pagePiling.js er initialisert av (dokument) .ready funksjon:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
For mer avanserte initialiseringer, gå gjennom README.md.
Handle om:
Hjemmeside: //alvarotrigo.com/pagePiling/
Opprettet av: alvarotrigo
Installasjon: Last ned fra Github
4. Alton
Alton er et jQuery 'plug-jacking til oss' plugin. Scroll jacking betyr at nettleserens innfødte bla er deaktivert til fordel for målrettet rulling, som når du starter (ved hjelp av musens hjul eller berøringsplate) tar deg til neste vertikale punkt på skjermen eller toppen av den neste beholderen.
Alton tillater tre separate typer funksjonalitet, kalt 'Hero', 'Bookend' og 'Standard'. Standard lar deg bruke fullstendig rulling, med hver del av 100% høyde. En rulle frembringer den neste delen eller forrige del. Bookend lar deg lage en bookend-type opplevelse mens Hero lar deg rulle jack bare delen "Hero", med resten av siden å ha (reenabled) innfødte rulling.
Handle om:
Hjemmeside: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Laget av: papirblad
Installasjon: Last ned fra Github
5. Stellar.js
Stellar er et jQuery-plugin som du enkelt kan legge til parallelle rullende effekter. For å kjøre må du først kjøre funksjonen $ .stellar (). Animasjonsinnstillinger for individuelle elementer kan konfigureres ved å bruke dataattributter på elementet.
Stellar selv lar deg ha parallax bakgrunner, som er bakgrunner som reposisjonerer på rulle. En av Stellar.js mest nyttige funksjoner er offsets.
Alle elementene kommer tilbake til deres opprinnelige posisjonering når deres offset foreldre møter kanten på skjermen - pluss eller minus din egen valgfrie offset. Dette lar deg lage intrikate parallax mønstre veldig enkelt. (Stellar Dokumentasjon)
Handle om:
Hjemmeside: //markdalgleish.com/projects/stellar.js/
Laget av: Mark Dalgeish
Installasjon: Last ned fra Github
6. multiScroll.js
Denne plugin er opprettet av den samme utvikleren (alvarotrigo) som gjorde pagePiling.js plugin. Hva multi-rull gjør i utgangspunktet, lar deg lage en effekt der hver side seksjon laster i to delte deler som glir på plass som siden laster. Sjekk ut hjemmesiden for å se hvordan dette ser ut i nettleseren din. multiScroll.js lar deg stille rullehastigheten, lette, tastaturrullingsalternativet og mange flere egenskaper slik at du kan tilpasse effekten til nøyaktig hvordan du trenger den.
Handle om:
Hjemmeside: //alvarotrigo.com/multiScroll/
Opprettet av: alvarotrigo
Installasjon: Last ned fra Github
7. ScrollMe
ScrollMe er et plugin for å legge til enkle parallellrulleeffekter på siden din. Den kan skalere, rotere, oversette og endre opaktheten til elementene på siden, mens du ruller nedover. ScrollMe krever ingen Javascript, og kun CSS kunnskap er nok. Ved å legge til klassen "animateme" og de nødvendige dataattributtene, kan du animere ethvert HTML-element. ScrollMe brukes best til å legge til CSS-effekter. Den er lett og alle animasjoner er glatte, så lenge du bruker dem i moderasjon.
Handle om:
Hjemmeside: //scrollme.nckprsn.com/
Laget av: Nick Pearson
Installasjon: Last ned fra Github
8. Parallax Scroll
Parallax Scroll er et brukervennlig jQuery-plugin som lar deg lage parallax image scroll-effekten som finnes på nettsteder som Spotify. Det er ganske enkelt å bruke - bare angi de nødvendige CSS-klassene for bildeholderne. Snarere enn å bruke koder, for å bruke dette pluginet må du bruke elementer som har et bakgrunnsbilde angitt (ved hjelp av CSS-egenskapen `bakgrunnsbilde`. Du kan gjøre elementene lydløse ved hjelp av CSS @media-spørringer.
Handle om:
Hjemmeside: //parallax-scroll.aenism.com/
Laget av: Aen
Installasjon: Last ned fra Github
9. Jarallax
Jarallax er et CSS og Javascript-bibliotek som spesialiserer seg på parallax-rullende effekter. Jarallax er konfigurert med Javascript (No jQuery, bare ren vanilje JS). Den støtter glatt rulling funksjoner, lettelse og parallax animasjon. Jarallax støttes av de fleste nettlesere, på tvers av plattformer. Jarallax-nettstedet har utmerket dokumentasjon på hvordan du tilpasser Jarallax til dine behov. Jarallax har også videoopplæringer som viser hvordan du konfigurerer Jarallax for ditt nettsted og hvordan du kommer i gang.
Handle om:
Hjemmeside: //www.jarallax.com/
Laget av: Jarallax
Installasjon: Last ned fra Jarallax nettside
10. Superscrollorama
Superscrollorama er et jQuery-basert plugin som støtter rulleanimasjoner. Den drives av TweenMax og Greensock Tweening Engine, som øker animasjonsytelsen og glattheten. Superscrollorama animasjoner kalles via jQuery, og du kan også bruke de fleste TweenMax.js funksjoner. Dessverre støttes disse animasjonene ikke fullt ut av mobile enheter (fordi berøringsskjerm-enheter håndterer rulling på en annen måte). Men ved hjelp av setScrollContainerOffset-metoden kan Superscrollorama-effekter nås på mobile enheter.
Her er koden for å gjøre dette:
.setScrollContainerOffset(x, y)
(x: x-forskyvningen på rullebeholderen, y: x-forskyvningen på rullebeholderen)
Handle om:
Hjemmeside: //johnpolacek.github.io/superscrollorama/
Opprettet av: johnpolacek
Installasjon: Last ned fra Github
SE OGSÅ: 10 Best Static Site Generators
