Oliver Matthews
0 
3556
536
Lange rullepladser er blevet en virkelig almindelig webdesigntrend. En af de sejeste undertyper af dette er parallax-rulningssteder, hvor billeder bevæger sig for at give afkald på en parallaxeffekt. Når brugeren ruller ned ad siden, udløses animationerne, og samlet set giver det et frisk udseende til ethvert websted, hvis det implementeres korrekt.
At fremstille et parallax-rulleplads er ofte kedeligt, fordi det kræver indgående kendskab til CSS, Javascript og god webdesign for at trække af. Her er en liste over Bedste Parallax-rulleplugins hvilket ikke kun gør det lettere for dig at oprette parallax-rulleområder, men også har et veludstyret parallax-effektsbibliotek, så det bliver lettere og hurtigere for dig at udvikle en flot webside.
ANSVARSFRASKRIVELSE: Før 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å kendskab til Jquery kan også være nødvendig.
Parallax-rulle-plugins
1. ScrollMagic
ScrollMagic er et af de mest populære og funktionsrige jquery-plugins derude. Det er et javascript-bibliotek, så du kan oprette tilsyneladende magiske rulleeffekter. Ved hjælp af ScrollMagic kan du animere baseret på din rulleposition. Dette betyder, at du kan rette, flytte eller animere HTML-elementer, mens du ruller, uanset hvilken varighed du ønsker, og også let tilføje parallaxeffekter til dit websted. Den er meget tilpasselig og er også let (6 kb når den gipses). Blandt andre parallax-rulleplugins har Scroll Magic den bedste dokumentation og eksterne ressourcer. Den er også perfekt kompatibel med mobil.
ScrollMagic har mange eksempler på listen. Tjek dem for inspiration og vejledning til at bruge 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 noget 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å vent. med skrollr kan du 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 giver dig mulighed for at oprette dit websted i forskellige sektioner, der hoper sig ovenpå hinanden. Ved rulning 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, som ikke understøtter dens animationer (som IE 7). For at bruge plugin skal du inkludere en CSS og en Javascript-fil i din HTML. pagePiling.js er initialiseret med (dokument). klar funktion:
$ (dokument). allerede (funktion ()
$ ( '# Pagepiling') pagepiling ().;
);
For mere avancerede initialiseringer skal du 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 to us' plugin. Rullehjul betyder, at din browsers oprindelige rulle er deaktiveret til fordel for målrettet rulle, som når den indledes (af dit musehjul eller berøringsplade) fører dig til det næste lodrette punkt på skærmen eller til toppen af den næste container.
Alton tillader tre forskellige typer funktionalitet, kaldet 'Hero', 'Bookend' og 'Standard'. Standard giver dig mulighed for at bruge hel sides rulning med hver sektion af 100% højde. En rulle viser det næste afsnit eller det forrige afsnit. Bookend giver dig mulighed for at oprette en bookend-slags oplevelse, mens Hero kun giver dig mulighed for at rulle jack-sektionen 'Hero' -sektionen, mens resten af siden har (genaktiveret) indbygget rulle.
Om:
Hjemmeside: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Oprettet af: papir-blad
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 funktionen $ .stellar (). Animationsindstillinger for individuelle elementer kan konfigureres ved hjælp af dataattributter på dette element.
Stellar giver dig endda mulighed for parallaksebaggrunder, som er baggrunde, der flyttes på rulle. En af Stellar.js 'mest nyttige funktioner er forskydninger.
Alle elementer vender tilbage til deres oprindelige placering, når deres forskudte forælder møder kanten af skærmen plus eller minus din egen valgfri forskydning. Dette giver dig mulighed for at oprette komplicerede parallaxmønstre meget let. (Stellar Dokumentation)
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 lavede plugin pagePiling.js. Hvad multirulle dybest set gør, er, at det giver dig mulighed for at oprette en effekt, hvor hvert sidesektion indlæses i to opdelte 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, rulning af tastatur og mange flere egenskaber, så du kan tilpasse effekten til nøjagtigt, 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-rulleffekter til din side. Det kan skalere, rotere, oversætte og ændre opaciteten 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. Parallax-rulle
Parallax Scroll er en nem at bruge jQuery-plugin, der giver dig mulighed for at oprette parallax-billedrulleeffekt, der findes på websteder som Spotify. Det er ganske enkelt at bruge - angiv blot de krævede CSS-klasser til billedholdere. Snarere end at bruge 
Jarallax er et CSS og Javascript-bibliotek, der er specialiseret i parallax-rulleeffekter. Jarallax er konfigureret ved hjælp af Javascript (Ingen jQuery, bare ren vanilje JS). Det understøtter glatte rulningsfunktioner, lempelse 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å videotutorials, der viser, hvordan man opsætter Jarallax til dit websted, og hvordan man 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 animationsydelsen og glatheden. 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 berøringsskærmsenheder håndterer rulning på en anden måde). Ved hjælp af metoden setScrollContainerOffset kan der dog fås adgang til Superscrollorama-effekter 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