Gadgetshowto
Lange rullesider har blitt en veldig vanlig webdesigntrend. En av de kuleste undertypene av dette er parallaks-rullesider, hvor bilder beveger seg for å gi en parallakseffekt. Når brukeren ruller nedover siden, blir animasjonene utløst, og generelt gir det et nytt utseende og følelse til ethvert nettsted hvis det er implementert riktig.
Å lage et parallaksrullende nettsted er ofte kjedelig fordi det krever inngående kunnskap om CSS, Javascript og god webdesign for å trekke frem. Her er en liste over Beste Parallax Scrolling Plugins som ikke bare gjør det lettere for deg å lage parallaksrullende nettsteder, men også har et godt utstyrt parallakseffektbibliotek slik at det blir lettere og raskere for deg å utvikle en pen webside.
FRASKRIVELSE: Før du begynner, må du merke at for å bruke disse programtilleggene er det nødvendig med kunnskap om webteknologier (HTML / CSS / Javascript). De fleste av de oppførte pluginene bruker jquery, så det kan også være behov for kunnskap om Jquery.
Parallax rulleplugins
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 å bruke ScrollMagic kan du animere ut fra din rulleposisjon. Dette betyr at du kan fikse, flytte eller animere HTML-elementer mens du ruller, uansett hvor lenge du vil, og også enkelt legge til parallakseffekter på nettstedet ditt. Det kan tilpasses og er også lett (6 kb når gzippet). Blant andre parallaks-rulleplugins har Scroll Magic den beste dokumentasjonen og eksterne ressurser. Det er også perfekt kompatibelt med mobil.
ScrollMagic har mange eksempler oppført. Ta en titt på dem 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 å kjenne Javascript eller noen jQuery. Bare HTML og CSS er nok. skrollr bruker dataattributter for å animere hvilket HTML-element du vil. En av de største ulempene med skrollr er at animasjoner bare fungerer mens siden rulles. Ellers settes alle effekter på vent. skrollr lar deg 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 et jQuery-plugin som lar deg lage nettstedet ditt i forskjellige seksjoner som hoper seg oppå hverandre. Når du blar, eller ved å få tilgang til URL-en, blir hver seksjon avslørt i en fin glidende animasjon. pagePiling.js er kompatibel med alle plattformer - stasjonær, nettbrett og mobil - og fungerer med de fleste nettlesere. Det brytes elegant ned på eldre nettlesere som ikke støtter animasjonene (som IE 7). For å bruke pluginet, må du inkludere en CSS og en Javascript-fil i HTML-en. pagePiling.js er initialisert av (document) .ready-funksjon:
$ (dokument). klar (funksjon ()
$ ('# sidepiling'). sidepiling ();
);
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. Rullejekking betyr at nettleserens opprinnelige rulle er deaktivert til fordel for målrettet rulling som når du starter (med mushjulet eller pekeplaten) tar deg til neste vertikale punkt på skjermen, eller toppen av neste beholder.
Alton tillater tre forskjellige typer funksjonalitet, kalt 'Hero', 'Bookend' og 'Standard'. Standard lar deg bruke helsidescrolling, med hver del av 100% høyde. En rulle bringer frem neste avsnitt eller forrige seksjon. Bookend lar deg lage en opplevelse av typen bookend mens Hero lar deg bla bare i "Hero" -delen, mens resten av siden har (aktivert) opprinnelig rulling.
Om:
Hjemmeside: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Laget av: paper-leaf
Installasjon: Last ned fra Github
5. Stellar.js
Stellar er et jQuery-plugin som du enkelt kan legge til parallaks-rulleeffekter. For å kjøre, må du først kjøre $ .stellar () -funksjonen. Animasjonsinnstillinger for individuelle elementer kan konfigureres ved hjelp av dataattributter på det elementet.
Med Stellar kan du til og med ha parallaksbakgrunner, som er bakgrunner som omplasseres på bla. En av Stellar.js 'mest nyttige funksjoner er forskyvninger.
Alle elementene vil gå tilbake til sin opprinnelige posisjon når deres offsetforelder møter kanten av skjermen pluss eller minus din egen valgfrie forskyvning. Dette lar deg lage intrikate parallaksmø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
Dette pluginet er opprettet av den samme utvikleren (alvarotrigo) som laget pluginet pagePiling.js. Hva multi scroll egentlig gjør er, det lar deg lage en effekt der hver sideseksjon lastes i to delte deler som glir på plass når siden lastes inn. Sjekk ut hjemmesiden for å se hvordan dette ser ut i nettleseren din. multiScroll.js lar deg stille rullehastighet, lettelse, tastaturrullealternativ og mange flere egenskaper slik at du kan tilpasse effekten til akkurat slik 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 parallax-rulleeffekter på siden din. Den kan skalere, rotere, oversette og endre elementets opasitet på siden når 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 hvilket som helst HTML-element. ScrollMe brukes best til å legge til CSS-effekter. Det er lett og alle animasjoner er glatte, så lenge du bruker dem i moderasjon.
Om:
Hjemmeside: http://scrollme.nckprsn.com/
Opprettet av: Nick Pearson
Installasjon: Last ned fra Github
8. Parallaks bla
Parallax Scroll er et brukervennlig jQuery-plugin som lar deg lage parallakseffekten for bildescrolling som finnes på nettsteder som Spotify. Det er ganske enkelt å bruke - bare spesifiser de nødvendige CSS-klassene for bildeholderne. Snarere enn å bruke for å bruke dette pluginet, må du bruke elementer som har et bakgrunnsbilde spesifisert (ved å bruke CSS-egenskapen 'bakgrunnsbilde'. Du kan gjøre elementene responsive ved hjelp av CSS @media-spørsmål.
Om:
Hjemmeside: http://parallax-scroll.aenism.com/
Opprettet av: Aen
Installasjon: Last ned fra Github
9. Jarallax
Jarallax er et CSS- og Javascript-bibliotek som spesialiserer seg på parallaks-rulleeffekter. Jarallax er konfigurert ved hjelp av Javascript (Ingen jQuery, bare ren vanilje JS). Den støtter jevne rullefunksjoner, lettelser og parallaksanimasjon. Jarallax støttes av de fleste nettlesere, på tvers av plattformer. Jarallax-nettstedet har utmerket dokumentasjon for hvordan du kan tilpasse Jarallax for dine behov. Jarallax har også videoveiledninger som viser hvordan du konfigurerer Jarallax for nettstedet ditt og hvordan du kommer i gang.
Om:
Hjemmeside: http://www.jarallax.com/
Opprettet av: Jarallax
Installasjon: Last ned fra Jarallax-nettstedet
10. Superscrollorama
Superscrollorama er et jQuery-basert plugin som støtter rulleanimasjoner. Den drives av TweenMax og Greensock Tweening Engine, noe som øker animasjonsytelsen og jevnheten. Superscrollorama-animasjoner kalles via jQuery, og du kan også bruke de fleste TweenMax.js-funksjonene. Dessverre støttes ikke disse animasjonene fullt ut av mobile enheter (fordi berøringsskjermenheter håndterer rulling på en annen måte). Imidlertid bruker du setScrollContainerOffset-metoden, kan du få tilgang til Superscrollorama-effekter på mobile enheter.
Her er koden for å gjøre dette:
.setScrollContainerOffset (x, y)
(x: x forskyvning av rullebeholderen, 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 generatorer
