Langrulle sites er blevet en rigtig fælles webdesign trend. En af de fedeste undertyper af dette er parallaxrulningsstederne, hvor billeder bevæger sig for at aflevere en parallax-effekt. Når brugeren ruller ned på siden, udløses animationerne, og i det hele taget giver det et nyt udseende til enhver hjemmeside, hvis den implementeres korrekt.
At lave et parallax scrolling site er ofte kedelig, fordi det kræver dybtgående kendskab til CSS, Javascript og et godt webdesign at trække af. Her er en liste over de bedste Parallax Scrolling plugins, som ikke kun gør det lettere for dig at oprette parallax scrolling sites, men også have et veludstyret parallax effekter bibliotek, så det bliver lettere og hurtigere for dig at udvikle en flot webside .
DISCLAIMER : Før du starter, bemærk at for at bruge disse plugins er der brug for noget kendskab til webteknologier (HTML / CSS / Javascript). De fleste af de listede plugins bruger jquery, så det kan også være nødvendigt at kende Jquery.
Parallax Scrolling Plugins
1. ScrollMagic
ScrollMagic er et af de mest populære og feature-rich jquery plugins derude. Det er et javascript bibliotek giver dig mulighed for at skabe tilsyneladende magiske scroll-effekter. 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 rulle, uanset hvilken varighed du vil have, og også nemt tilføje parallaxeffekter til din hjemmeside. Det er meget brugerdefineret og er også letvægt (6kb ved gzipped). Blandt andre parallax scroll plugins har Scroll Magic den bedste dokumentation og eksterne ressourcer. Det er også kompatibelt med mobil.
ScrollMagic har mange eksempler på listen. Tjek dem ud for inspiration og vejledning om brug af dette bibliotek.
Om:
Hjemmeside: //janpaepke.github.io/ScrollMagic/
Lavet af: Jan Paepke
Installation:
1. CDN:
2. Download fra Github
2. skrollr
skrollr er et letvægts rent Javascript og CSS bibliotek, uden jQuery involveret. Det er grundlæggende 'Scroll Magic forenklet til CSS'. For at bruge skrollr behøver du ikke 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 virker, mens siden rulles. Ellers er alle effekter sat på vent. skrollr lader dig animere alle CSS egenskaber af dine HTML-elementer.
Om:
Hjemmeside: //prinzhorn.github.io/skrollr/
Lavet af: Prinzhorn
Installation: Download fra Github
3. pagePiling.js 
Page Piling er et jQuery-plugin, som giver dig mulighed for at oprette dit websted i forskellige sektioner, som bunker oven på hinanden. Når du ruller, eller ved at få adgang til webadressen, bliver hver sektion afsløret i en pæn glidende animation. pagePiling.js er kompatibel med alle platforme - desktop, tablet og mobil - og fungerer sammen med de fleste browsere. Det nedbryder yndefuldt på ældre browsere, som ikke understøtter sine animationer (som IE 7). For at bruge pluginet skal du inkludere en CSS og en Javascript-fil inde i din HTML. pagePiling.js initialiseres af (dokument) .ready funktion:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
For mere avancerede initialiseringer, gå gennem README.md.
Om:
Hjemmeside: //alvarotrigo.com/pagePiling/
Lavet af: alvarotrigo
Installation: Download fra Github
4. Alton
Alton er et jQuery 'plug-jacking til os' plugin. Scroll jacking betyder, at din browser's native scroll er deaktiveret til fordel for målrettet scrolling, som når du starter (ved hjælp af musen hjul eller touchpad) fører dig til det næste lodrette punkt på skærmen eller toppen af den næste container.
Alton tillader tre separate funktioner, kaldet 'Hero', 'Bookend' og 'Standard'. Standard giver dig mulighed for at bruge fuld scrolling med hver side af 100% højde. En rulle frembringer den næste sektion eller det foregående afsnit. Bookend giver dig mulighed for at oprette en bookend-kind oplevelse, mens Hero giver dig mulighed for at rulle jack kun sektionen 'Hero', hvor resten af siden har (genaktiveret) native scrolling.
Om:
Hjemmeside: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Lavet af: papirblad
Installation: Download fra Github
5. Stellar.js
Stellar er et jQuery-plugin, hvorigennem du nemt kan tilføje parallax-rullende effekter. For at køre skal du først køre funktionen $ .stellar (). Animationsindstillinger for enkelte elementer kan konfigureres ved hjælp af datatributter på det pågældende element.
Stellar selv lader dig have parallax baggrunde, som er baggrunde, der genplaceres på scroll. En af Stellar.js mest nyttige funktioner er offsets.
Alle elementer vender tilbage til deres oprindelige positionering, når deres offsetforælder møder skærmens kant - plus eller minus din egen valgfri forskydning. Dette giver dig mulighed for at skabe indviklede parallax mønstre meget nemt. (Stellar Documentation)
Om:
Hjemmeside: //markdalgleish.com/projects/stellar.js/
Lavet af: Mark Dalgeish
Installation: Download fra Github
6. multiScroll.js
Dette plugin er oprettet af den samme udvikler (alvarotrigo), der lavede sidenPiling.js plugin. Hvad multi-scroll i grunden gør, det lader dig oprette en effekt, hvor de enkelte sidedele lægges i to opdelte dele, som glider på plads, som siden indlæses. Tjek hjemmesiden for at se, hvordan dette ser ud i din browser. multiScroll.js giver dig mulighed for at indstille rullehastigheden, lempelsen, tastaturrulleindstillingen og mange flere egenskaber, så du kan tilpasse effekten til præcis, hvordan du har brug for den.
Om:
Hjemmeside: //alvarotrigo.com/multiScroll/
Lavet af: alvarotrigo
Installation: Download fra Github
7. ScrollMe
ScrollMe er et plugin til at tilføje simple parallax scroll-effekter til din side. Det kan skala, rotere, oversætte og ændre uigennemsigtigheden af elementer på siden, mens du ruller ned. ScrollMe kræver ingen Javascript, og kun CSS viden er nok. Ved at tilføje klassen "animateme" og de nødvendige 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: //scrollme.nckprsn.com/
Lavet af: Nick Pearson
Installation: Download fra Github
8. Parallax Scroll
Parallax Scroll er en nem at bruge jQuery-plugin, som lader dig oprette parallaxbilled-effekten på sider som Spotify. Det er ret nemt at bruge - angiv kun de krævede CSS-klasser for billedholdere. I stedet for at bruge tags, for at bruge dette plugin skal du bruge elementer, der har et angivet baggrundsbilde (ved hjælp af CSS-egenskaben `background-image`. Du kan gøre elementerne lydhørlige ved hjælp af CSS @media-forespørgsler.
Om:
Hjemmeside: //parallax-scroll.aenism.com/
Lavet af: Aen
Installation: Download fra Github
9. Jarallax
Jarallax er et CSS og Javascript bibliotek, der specialiserer sig i parallax scrolling effekter. Jarallax er konfigureret ved hjælp af Javascript (Ingen jQuery, bare ren vanille JS). Det understøtter glatte rullefunktioner, lempelse og parallax animation. Jarallax understøttes af de fleste browsere på tværs af platforme. Jarallax hjemmeside har fremragende dokumentation for, hvordan du tilpasser Jarallax til dine behov. Jarallax har også video tutorials, der viser, hvordan du opsætter Jarallax til din hjemmeside og hvordan du kommer i gang.
Om:
Hjemmeside: //www.jarallax.com/
Lavet af: Jarallax
Installation: Download fra Jarallax hjemmeside
10. Superscrollorama
Superscrollorama er et jQuery-baseret plugin, der understøtter scroll animationer. Den drives af TweenMax og Greensock Tweening Engine, som ø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 mobilenheder (fordi berøringsskærm-enheder håndterer rulning på en anden måde). Ved hjælp af setScrollContainerOffset-metoden kan du imidlertid få adgang til Superscrollorama-effekter på mobile enheder.
Her er koden for at gøre dette:
.setScrollContainerOffset(x, y)
(x: x-forskydningen af rullebeholderen, y: rullebeholderens x offset)
Om:
Hjemmeside: //johnpolacek.github.io/superscrollorama/
Lavet af: johnpolacek
Installation: Download fra Github
SE OGSÅ: 10 Bedste Static Site Generators
