Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End

Jednostavna Parallax Scrolling Tehnika

by
Difficulty:IntermediateLength:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Parallax scrolling je zanimljiva tehnika u kojoj se, dok skrolate, pozadinske slike prevode sporije od sadržaja u prvom planu, stvarajući iluziju 3D dubine. Dok sam planirao re-dizajnirati svoju osobnu web stranicu, moj prvi cilj bio je napisati najkraći i najjednostavniji kod kako bih postigao maksimalnu fantastičnost! Pokazati ću vam kako sam to učinio.

Ako tražite brz način da započnete s osnovnim predloškom za svoju temu, pronalazak jednostavne Parallax Teme mogao biti dobar izbor. Ili pregledajte naše One Page Templates jednostavne predloške. Također možete pronaći davatelje usluga na Envato Studiu koji će vam kreirati parallax scrolling stranice.

U ovom tutorialu ću vas naučiti najjednostavniju tehniku pomicanja paralakse koju ste ikada vidjeli, stoga krenimo na posao!


1 korak: Označavanje

Ova se tehnika vrti oko kontroliranja brzine pozadinske slike. Zato počnimo s HTML oznakom, stvarajući dva odjeljka zajedno s potrebnim atributima: "data-type" i "data-speed". Ne brinite; Njih ću objasniti kasnije.

Ja koristim <section> tag sa atributima data-type i data-speed, koji su predstavljeni u HTML5. To čini HTML oznaku  čišćom i jasnijom za čitanje.

Prema specifikaciji za Custom Data Attributes, bilo koji atribut koji počinje s data- bit će tretiran kao prostor za pohranu za privatne podatke. Osim toga, to neće utjecati na izgled ili prezentaciju.

Budući da trebamo samo kontrolirati brzinu pozadinskih slika, koristit ćemo data-type="background" i data-speed="10" kao ključne atribute kako bismo odredili potrebne parametre.

Znam što mislite: zabrinuta ste za IE. Nikada se ne bojte; Pronašao sam zaobilazno rješenje i za to! Porazgovarati ćemo o tome.

Zatim, dodajmo sadržaj unutar <article> taga unutar svakog <section>.

Ono što ovdje pokušavamo napraviti je da se <section> pozadina kreće sporije od svojeg sadržaja, tj. <article>. To će nam pomoći stvoriti iluziju paralakse. Prije nego što prijeđemo na jQuery čaroliju, dodamo pozadinske slike u našem CSS-u za svaki <section>.

Nakon što dodate pozadine za oba odjeljka, ona bi trebala izgledati ovako:

image
image

Dodajmo još CSS-a da stiliziramo i začinimo stranicu!

Sada bi trebalo izgledati ovako ...

image

Korak 2: Čarobni Kod

Da, tako je; ovdje počinje magija! Koristeći jQuery, započinjemo sa standardnom metodom document.ready () kako bismo bili sigurni da je stranica učitana i spremna za manipulaciju.

Ova tehnika se vrti oko kontroliranja brzine pozadinske slike koja postoji u oba odjeljka.

Sada trebam vašu pažnju. Prva stvar koja se događa u nastavku je da iteriramo preko svakog <section> na stranici, koji ima atribut data-type="background".

Dodajte još jednu funkciju, .scroll(), unutar .each (), koja se poziva kada korisnik počne skrolati.

Moramo utvrditi koliko je korisnik skrolao prema gore, i zatim podijeliti vrijednost s data-speed vrijednosti, koja se spominje u označnoj vrijednosti.

$ window.scrollTop (): dobivamo trenutnu vrijednost skrolanja odozgo. U osnovi, to određuje koliko je korisnik pomaknuo gore. $bgobj.data('speed') se odnosi na data-speed dodijeljenu u oznaci, a yPos je konačna vrijednost koju trebamo podnijeti zahtjev za pomicanje. Međutim, to će biti negativna vrijednost jer moramo premjestiti pozadinu u suprotnom smjeru korisnika.

Istražimo još malo sa primjerom:

image

Na slici iznad, data-speed je 10, i pretpostavimo da je prozor pretraživača pomaknut za 57px. To znači 57px podijeljeno sa 10 = 5.7px.

Posljednja stvar koju trebamo učiniti jest sastaviti naš konačni pozadinski položaj u varijablu. Kako vodoravni položaj pozadine ostao statičan, dodijelili smo 50% kao svoju xPosition. Zatim smo dodali yPos kao yPosition i naposljetku dodijelili pozadinske koordinate našoj <section> pozadini: $bgobj.css({ backgroundPosition:coords });.

Vaš konačni kod mogao bi izgledati ovako:

Odlično, završili smo! Isprobajte sami.


IE Popravak

Imamo još jedan posljednji popravak: stariji IE ne može renderirati <section> i <article> tagove. To je, doduše, lako popraviti; upotrijebiti ćemo standardno rješenje za izradu elemenata, što čini pretraživač magično prepoznatljivim HTML tagovima.

Osim toga, moramo upotrijebiti osnovnu CSS reset datoteku kako bi svi preglednici mogli dobro funkcionirati. Srećom, alati, kao što je HTML5 Boilerplate, obavljaju težinu posla umjesto nas, kada je riječ o normalizaciji cross-preglednika.

To će biti sve za ovu lekciju! Imate li kakvih pitanja ili neki komentar koji biste željeli dodati? Javite mi ispod u komentarima!

I ako tražite brzo rješenje sa profesionalnim rezultatima, pretražite naše Parallax Theme i One Page Template opcije, dostupne u prodaji na našem ThemeForest online tržištu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.