Gadgetshowto
Lange rullende sider er blevet en rigtig almindelig tendens til webdesign. En af de sejeste undertyper til dette er parallaksrulningsstederne, hvor billeder bevæger sig for at give en parallakseffekt. Når brugeren ruller ned på siden, udløses animationerne, og generelt giver det et nyt udseende og følelse til ethvert websted, hvis det implementeres korrekt.
At lave et parallaksrulningssted er ofte kedeligt, fordi det kræver dybtgående viden om CSS, Javascript og godt webdesign for at få fat i det. Her er en liste over Bedste Parallax-rulleplugins som ikke kun gør det nemmere for dig at oprette parallaksrulningssteder, men også har et veludstyret parallakseffektbibliotek, så det bliver lettere og hurtigere for dig at udvikle en flot webside.
ANSVARSFRASKRIVELSE: Inden du starter, skal du bemærke, at for at bruge disse plugins kræves en vis viden om webteknologier (HTML / CSS / Javascript). De fleste af de nævnte plugins bruger jquery, så viden om Jquery kan også være nødvendig.
Parallaks rulleplugins
1. ScrollMagic
ScrollMagic er et af de mest populære og funktionsrige jquery-plugins derude. Det er et javascript-bibliotek, der giver dig mulighed for at oprette tilsyneladende magiske rulleeffekter. Ved hjælp af ScrollMagic kan du animere ud fra din rulleposition. Dette betyder, at du kan rette, flytte eller animere HTML-elementer, mens du ruller, uanset hvor lang tid du vil, og også nemt tilføje parallakseffekter til dit websted. Det kan tilpasses meget og er også let (6 kb når gzippet). Blandt andre parallax-scroll-plugins har Scroll Magic den bedste dokumentation og eksterne ressourcer. Det er også perfekt kompatibelt med mobil.
ScrollMagic har mange eksempler. Tjek dem for inspiration og vejledning i brugen af dette bibliotek.
Om:
Hjemmeside: http://janpaepke.github.io/ScrollMagic/
Oprettet af: Jan Paepke
Installation:
1. CDN:
2. Download fra Github
2. skrollr
skrollr er et let, rent Javascript- og CSS-bibliotek uden jQuery involveret. Det er dybest set 'Scroll Magic forenklet til CSS'. For at bruge skrollr behøver du ikke kende Javascript eller nogen jQuery. Bare HTML og CSS er nok. skrollr bruger dataattributter til at animere ethvert HTML-element, du ønsker. En af de største ulemper ved skrollr er, at animationer kun fungerer, mens siden rulles. Ellers sættes alle effekter på hold. skrollr giver dig mulighed for at animere alle CSS-egenskaber for dine HTML-elementer.
Om:
Hjemmeside: http://prinzhorn.github.io/skrollr/
Oprettet af: Prinzhorn
Installation: Download fra Github
3. pagePiling.js
Page Piling er et jQuery-plugin, der lader dig oprette dit websted i forskellige sektioner, som bunker oven på hinanden. Når du ruller, eller ved at få adgang til URL'en, afsløres hvert afsnit i en pæn glidende animation. pagePiling.js er kompatibel med alle platforme - desktop, tablet og mobil - og fungerer med de fleste browsere. Det nedbrydes yndefuldt på ældre browsere, der ikke understøtter dets animationer (som IE 7). For at bruge pluginet skal du medtage en CSS og en Javascript-fil i din HTML. pagePiling.js initialiseres af (dokument). allerede funktion:
$ (dokument). klar (funktion ()
$ ('# sidepiling'). sidepiling ();
);
For mere avancerede initialiseringer, gå gennem README.md.
Om:
Hjemmeside: http://alvarotrigo.com/pagePiling/
Oprettet af: alvarotrigo
Installation: Download fra Github
4. Alton
Alton er et jQuery 'scroll-jacking til os' plugin. Rullestik betyder, at din browsers oprindelige rulle er deaktiveret til fordel for målrettet rulning, som når den startes (med dit mushjul eller touchpad) fører dig til det næste lodrette punkt på skærmen eller toppen af den næste container.
Alton tillader tre forskellige slags funktioner, kaldet 'Hero', 'Bookend' og 'Standard'. Standard giver dig mulighed for at rulle på hele siderne med hvert afsnit på 100% højde. En rulle frembringer det næste afsnit eller det forrige afsnit. Bookend giver dig mulighed for at oprette en bogend-oplevelse, mens Hero kun giver dig mulighed for at rulle jack-sektionen 'Hero', mens resten af siden har (genaktiveret) oprindelig rulning.
Om:
Hjemmeside: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Oprettet af: paper-leaf
Installation: Download fra Github
5. Stellar.js
Stellar er et jQuery-plugin, hvorigennem du nemt kan tilføje parallax-rulleeffekter. For at køre skal du først køre $ .stellar () -funktionen. Animationsindstillinger for individuelle elementer kan konfigureres ved hjælp af dataattributter på dette element.
Stellar lader dig endda have parallax baggrunde, som er baggrunde, der placeres igen på rulle. En af Stellar.js 'mest nyttige funktioner er forskydninger.
Alle elementer vender tilbage til deres oprindelige position, når deres forskydningsforælder møder kanten af skærmen plus eller minus din egen valgfri forskydning. Dette giver dig mulighed for at oprette indviklede parallax mønstre meget let. (Stjernedokumentation)
Om:
Hjemmeside: http://markdalgleish.com/projects/stellar.js/
Oprettet af: Mark Dalgeish
Installation: Download fra Github
6. multiScroll.js
Dette plugin er oprettet af den samme udvikler (alvarotrigo), der oprettede plugin pagePiling.js. Hvad multi scroll grundlæggende gør er, det giver dig mulighed for at skabe en effekt, hvor hver sidesektion indlæses i to delte dele, der glider på plads, når siden indlæses. Tjek hjemmesiden for at se, hvordan dette ser ud i din browser. multiScroll.js giver dig mulighed for at indstille rullehastighed, lempelse, tastaturrulningsmulighed og mange flere egenskaber, så du kan tilpasse effekten til præcis, hvordan du har brug for den.
Om:
Hjemmeside: http://alvarotrigo.com/multiScroll/
Oprettet af: alvarotrigo
Installation: Download fra Github
7. ScrollMe
ScrollMe er et plugin til at tilføje enkle parallax-rulleeffekter til din side. Det kan skalere, rotere, oversætte og ændre opacitet af elementer på siden, når du ruller ned. ScrollMe kræver intet Javascript, og kun CSS-viden er nok. Ved at tilføje klassen "animateme" og de krævede dataattributter kan du animere ethvert HTML-element. ScrollMe bruges bedst til at tilføje CSS-effekter. Det er let og alle animationer er glatte, så længe du bruger dem i moderation.
Om:
Hjemmeside: http://scrollme.nckprsn.com/
Oprettet af: Nick Pearson
Installation: Download fra Github
8. Parallaks rulle
Parallax Scroll er et brugervenligt jQuery-plugin, der giver dig mulighed for at oprette parallax-billedrulleeffekten, der findes på websteder som Spotify. Det er ret simpelt at bruge - angiv bare de krævede CSS-klasser til billedholderne. Snarere end at bruge tags, for at bruge dette plugin skal du bruge elementer, der har et baggrundsbillede specificeret (ved hjælp af CSS-egenskaben 'baggrundsbillede'. Du kan gøre elementerne lydhøre ved hjælp af CSS @media-forespørgsler.
Om:
Hjemmeside: http://parallax-scroll.aenism.com/
Oprettet af: Aen
Installation: Download fra Github
9. Jarallax
Jarallax er et CSS- og Javascript-bibliotek, der specialiserer sig i parallax-rulleeffekter. Jarallax er konfigureret ved hjælp af Javascript (Ingen jQuery, bare ren vanille JS). Det understøtter glatte rullefunktioner, lettelse og parallax-animation. Jarallax understøttes af de fleste browsere på tværs af platforme. Jarallax-webstedet har fremragende dokumentation for, hvordan du tilpasser Jarallax til dine behov. Jarallax har også video-tutorials, der viser, hvordan du opsætter Jarallax til dit websted, og hvordan du kommer i gang.
Om:
Hjemmeside: http://www.jarallax.com/
Oprettet af: Jarallax
Installation: Download fra Jarallax-webstedet
10. Superscrollorama
Superscrollorama er et jQuery-baseret plugin, der understøtter rulleanimationer. Det er drevet af TweenMax og Greensock Tweening Engine, hvilket øger animationsydelse og glathed. Superscrollorama-animationer kaldes via jQuery, og du kan også bruge de fleste TweenMax.js-funktioner. Desværre understøttes disse animationer ikke fuldt ud af mobile enheder (fordi enheder med berøringsskærm håndterer rulning på en anden måde). Men ved hjælp af metoden setScrollContainerOffset kan Superscrollorama-effekter fås på mobile enheder.
Her er koden til at gøre dette:
.setScrollContainerOffset (x, y)
(x: x-forskydningen af rullecontaineren, y: x-forskydningen af rullecontaineren)
Om:
Hjemmeside: http://johnpolacek.github.io/superscrollorama/
Oprettet af: johnpolacek
Installation: Download fra Github
SE OGSÅ: 10 bedste statiske stedgeneratorer
