Duge stranice za pomicanje postale su uobičajeni trend web dizajna. Jedna od najboljih podvrsta ovoga su mjesta za pomicanje paralakse, gdje se slike pomiču kako bi se dobio efekt paralakse. Kako se korisnik pomiče prema dolje, animacije se aktiviraju i sveukupno daje svjež izgled i osjećaj bilo kojoj web-lokaciji ako se pravilno implementira.
Izrada paralaksa stranica je često zamorno jer zahtijeva dubinsko poznavanje CSS-a, Javascript-a i dobrog web dizajna. Ovdje je popis najboljih dodataka za pomicanje paralakse koji ne samo da olakšavaju stvaranje paralakse stranica, već imaju i bogatu paralaksnu biblioteku efekata tako da postaje lakše i brže razviti web stranicu koja izgleda dobro.,
ODRICANJE : Prije početka, imajte na umu da je za korištenje ovih dodataka potrebno poznavanje web tehnologija (HTML / CSS / Javascript). Većina navedenih dodataka koristi jquery, tako da bi moglo biti potrebno i poznavanje Jquery.
Dodaci za pomicanje paralakse
1. ScrollMagic
ScrollMagic je jedan od najpopularnijih i bogatih značajkama. To je JavaScript knjižnica omogućuje stvaranje naizgled čarobne efekte svitka. Koristeći ScrollMagic možete animirati na temelju svoje pozicije pomicanja. To znači da možete popraviti, premjestiti ili animirati HTML elemente dok se krećete, bez obzira na trajanje koje želite, a također i jednostavno dodajte efekte paralakse na svoju web-lokaciju. To je vrlo prilagodljiv i također je lagan (6kb kada gzipped). Među ostalim dodatcima za pomicanje paralakse, Scroll Magic ima najbolju dokumentaciju i vanjske resurse. To je savršeno kompatibilan s mobilnim previše.
ScrollMagic ima mnogo navedenih primjera. Provjerite ih za inspiraciju i smjernice za korištenje ove knjižnice.
Oko:
Početna stranica: //janpaepke.github.io/ScrollMagic/
Autor: Jan Paepke
Montaža:
1. CDN:
2. Preuzmi s Githuba
2. skrollr
skrollr je lagana čista Javascript i CSS knjižnica, bez uključenog jQuery-a. U osnovi je "Scroll Magic pojednostavljen za CSS". Da biste koristili skrollr, ne morate znati Javascript ili bilo koji jQuery. Dovoljno je samo HTML i CSS. skrollr koristi atribute podataka kako bi animirao bilo koji HTML element koji želite. Jedan od glavnih nedostataka skrollr-a je da animacije rade samo dok se stranica pomiče. Inače se svi efekti stavljaju na čekanje. skrollr vam omogućuje animiranje svih CSS svojstava HTML elemenata.
Oko:
Početna stranica: //prinzhorn.github.io/skrollr/
Izradio: Prinzhorn
Instalacija: Preuzmite s Githuba
3. pagePiling.js 
Page Piling je jQuery plugin koji vam omogućuje stvaranje vaše web stranice na različite dijelove koji se gomilaju jedan na drugome. Nakon pomicanja, ili pristupanjem URL-u, svaka sekcija se otkriva u urednoj kliznoj animaciji. pagePiling.js kompatibilan je sa svim platformama - desktop, tablet i mobilnim - i radi s većinom preglednika. Degradira se na starijim preglednicima koji ne podržavaju njegove animacije (poput IE 7). Da biste koristili dodatak, morate u svoj HTML uključiti CSS i Javascript datoteku. pagePiling.js se inicijalizira funkcijom (document) .ready:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Za naprednije inicijalizacije prođite kroz README.md.
Oko:
Početna stranica: //alvarotrigo.com/pagePiling/
Izradio: alvarotrigo
Instalacija: Preuzmite s Githuba
4. Alton
Alton je jQuery 'scroll-jacking za nas' plugin. Klizanje pomoću pomicanja znači da je prirodno pomicanje vašeg preglednika onemogućeno u korist ciljanog pomicanja koje vas, kada ga pokrenete (pomoću kotačića miša ili dodirne podloge), odvede na sljedeću okomitu točku na zaslonu ili na vrh sljedećeg spremnika.
Alton omogućuje tri različite vrste funkcionalnosti, nazvane 'Hero', 'Bookend' i 'Standard'. Standard vam omogućuje korištenje cijelog pomicanja stranica, pri čemu svaki odjeljak ima 100% visine. Svitak donosi sljedeći odjeljak ili prethodni odjeljak. Bookend vam omogućuje da stvorite doživljaj vrste bookend-a, dok vam Hero omogućuje da pomičete jack samo u odjeljku 'Hero', dok ostatak stranice ima (ponovno omogućeno) prirodno pomicanje.
Oko:
Početna stranica: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Stvorio: papirnati list
Instalacija: Preuzmite s Githuba
5. Stellar.js
Zvjezdana je jQuery dodatak pomoću kojeg možete jednostavno dodati efekte pomicanja paralakse. Za pokretanje prvo morate pokrenuti $ .stellar () funkciju. Postavke animacije za pojedine elemente mogu se konfigurirati pomoću atributa podataka na tom elementu.
Zvjezdana čak vam omogućuje da imate pozadine paralakse, koje su pozadine koje se pomiču na svitku. Jedna od najkorisnijih značajki Stellar.js je pomak.
Svi elementi će se vratiti na svoje prvobitno pozicioniranje kada njihovi nadređeni roditelji naiđu na rub zaslona - plus ili minus vlastitog opcionalnog pomaka. To vam omogućuje da stvorite zamršene obrasce paralakse vrlo jednostavno. (Zvjezdana dokumentacija)
Oko:
Početna stranica: //markdalgleish.com/projects/stellar.js/
Izradio: Mark Dalgeish
Instalacija: Preuzmite s Githuba
6. multiScroll.js
Ovaj dodatak je stvorio isti programer (alvarotrigo) koji je napravio plugin pagePiling.js. Ono što multi scroll u osnovi čini jest, omogućuje vam stvaranje efekta gdje se svaki odjeljak stranice učitava u dva podijeljena dijela koji se pomiču dok se stranica učitava. Pogledajte početnu stranicu kako biste vidjeli kako to izgleda u pregledniku. multiScroll.js omogućuje vam da postavite brzinu pomicanja, olakšavanje, opciju pomicanja tipkovnice i još mnogo drugih svojstava, tako da efekt možete prilagoditi točno onome kako je potrebno.
Oko:
Početna stranica: //alvarotrigo.com/multiScroll/
Izradio: alvarotrigo
Instalacija: Preuzmite s Githuba
7. ScrollMe
ScrollMe je dodatak za dodavanje jednostavnih efekata pomicanja paralakse na vašu stranicu. To može mjeriti, rotirati, prevesti i promijeniti neprozirnost elemenata na stranici, dok se pomičete prema dolje. ScrollMe ne zahtijeva Javascript, a dovoljno je samo CSS znanje. Dodavanjem klase "animateme" i potrebnih atributa podataka možete animirati bilo koji HTML element. ScrollMe se najbolje koristi za dodavanje CSS efekata. Lagana je i sve animacije su glatke, sve dok ih koristite u moderiranju.
Oko:
Početna stranica: //scrollme.nckprsn.com/
Izradio: Nick Pearson
Instalacija: Preuzmite s Githuba
8. Pomicanje paralakse
Parallax Scroll je jednostavan za korištenje jQuery plugin koji vam omogućuje stvaranje efekta svitka paralakse slike na stranicama poput Spotify. To je vrlo jednostavno za korištenje - samo navedite potrebne CSS klase za nositelje slika. Umjesto korištenja Da biste koristili ovaj dodatak, morate koristiti elemente koji imaju navedenu pozadinsku sliku (pomoću CSS svojstva pozadine-slike. Elemente možete prilagoditi pomoću CSS @media upita.
Oko:
Početna stranica: //parallax-scroll.aenism.com/
Izradio: Aen
Instalacija: Preuzmite s Githuba
9. Jarallax
Jarallax je CSS i Javascript biblioteka koja je specijalizirana za efekte pomicanja paralakse. Jarallax je konfiguriran pomoću Javascripta (ne jQuery, samo čista vanilija JS). Podržava glatke značajke pomicanja, olakšavanje i animaciju paralakse. Jarallax podržava većina preglednika na svim platformama. Jarallax web stranica ima izvrsnu dokumentaciju o tome kako prilagoditi Jarallax za vaše potrebe. Jarallax također ima video tutoriale koji pokazuju kako postaviti Jarallax za vašu web stranicu i kako započeti.
Oko:
Homepage: //www.jarallax.com/
Izradio: Jarallax
Instalacija: Preuzmite s web-mjesta Jarallax
10. Superscrollorama
Superscrollorama je plugin na bazi jQuery koji podržava animacije za pomicanje. Pokreće ga TweenMax i Greensock Tweening Engine, što povećava performanse animacije i glatkoću. Superscrollorama animacije se pozivaju preko jQuery, a možete koristiti i većinu TweenMax.js funkcija. Nažalost, ove animacije nisu u potpunosti podržane mobilnim uređajima (jer uređaji na dodirnom zaslonu rukuju pomicanjem na drugačiji način). Međutim, metodom setScrollContainerOffset, učincima Superscrollorama možete pristupiti na mobilnim uređajima.
Ovo je kôd za to:
.setScrollContainerOffset(x, y)
(x: x pomak pomicnog kontejnera, y: x pomak pomicnog kontejnera)
Oko:
Početna stranica: //johnpolacek.github.io/superscrollorama/
Izradio: johnpolacek
Instalacija: Preuzmite s Githuba
TAKOĐER: 10 najboljih statičkih generatora
