Nedavno su se posvuda počele pojavljivati web stranice s efektima pomicanja paralakse. Nisam ovo želio propustiti, pa sam izradio demo stranicu s efektom pomicanja paralakse koristeći jQuery i CSS.
Što je "paralaksa"? Čak i ako niste upoznati s izrazom "pomicanje paralakse", vjerojatno ste upoznati s tehnikom. Paralaksno pomicanje je proces 2D animacije koji stvara iluziju dubine. Animiranje slojeva u prednjem planu brže je od animiranja pozadinskih slojeva. Kada gledate automobil koji se kreće, čini se da se objekti ispred automobila kreću brže od objekata iza automobila. Paralaksno pomicanje koristi isti princip kako bi gledatelj pomislio da gleda 3D scenu.Možete se pomicati kao i obično, koristiti navigacijski izbornik na desnoj strani stranice ili gumbe sljedeći/prethodni koji se pojavljuju ispod svakog članka.
Stranica sadrži četiri neovisno animirana sloja za stvaranje iluzije dubine.
Pomicanje je glatko u Safariju (barem na mom računalu), ali demo bi trebao raditi u bilo kojem modernom pregledniku.
Odricanje od odgovornosti 1: Budući da je sve ovo samo eksperiment, nisam optimizirao demo za rad na mobilnim uređajima.
Odricanje od odgovornosti 2: Navigacijski izbornik korišten u demonstraciji je s web stranice Nike Better World. Ako planirate koristiti sličnu navigaciju na svojoj stranici, imajte na umu njezino podrijetlo.
Kako to radi Članci i pozadinski sloj dobivaju fiksni položaj pomoću CSS-a, a također im se daje svojstvo z-index kako bi se osiguralo da se novi slojevi pojavljuju iznad pozadinskog sloja. Koriste se četiri sloja: mali oblaci, veliki oblaci, balon/pejzažna slika, sloj članka./* prednji sloj (balon/pejzažna slika) */ #parallax-bg3 ( z-indeks: 3; položaj: fiksno; lijevo: 50%; /* poravnajte lijevi rub sa središtem prozora */ vrh: 0; širina: 940px; margin-left: -470px; /* pomakni lijevo pola širine elementa */)
Svaki sloj ima apsolutno pozicioniranje. Ovo je bio najteži dio cijelog procesa, jer su elementi morali biti postavljeni na takav način da prilikom skrolanja na bilo koji od četiri članka, članak bude ravnomjerno poravnat u odnosu na prozor preglednika. U ovom slučaju to je postignuto pokušajem i pogreškom.
#bg3-1 ( pozicija: apsolutna; gore: -111px; lijevo: 355px; ) #bg3-2 ( pozicija: apsolutna; gore: 812px; lijevo: 321px; ) /* i tako dalje... */
Za stvaranje efekta pomicanja paralakse potrebno je samo nekoliko redaka koda pomoću jQueryja. Iznenadilo me koliko je bilo lako.
$(prozor).bind("scroll",function(e)( parallaxScroll(); )); funkcija parallaxScroll())( var scrolled = $(window).scrollTop(); $("#parallax-bg1").css("top",(0-(scrolled*.25))+"px"); $ ("#parallax-bg2").css("top",(0-(scrolled*.5))+"px"); $("#parallax-bg3").css("top",(0 - (pomicano*.75))+"px"); )
Prednji sloj uvijek je poravnat s vrhom dokumenta, dok se pomicanje ostalih slojeva prilagođava na temelju njihove dubine.
Što je sloj niži, to se sporije kreće.
Ostatak jQuery koda koristi se za kontrolu navigacije. Kada korisnik klikne gumb za navigaciju, stranica se pomiče do odgovarajućeg članka. Ako je korisniku onemogućen JavaScript, "sidra" koja se koriste na poveznicama stupaju na snagu. I dalje vam omogućuju kretanje po stranici, ali bez animacije.
Sljedeći koraci Siguran sam da postoji mnogo drugih načina za stvaranje efekta pomicanja paralakse i nadam se da će moje iskustvo poslužiti kao polazna točka za istraživanje ove metode.Naučite kako stvoriti efekt pomicanja paralakse pomoću CSS-a.
ParalaksaParalaksno pomicanje je trend web stranice u kojem se pozadinski sadržaj (tj. slika) kreće drugačijom brzinom od sadržaja u prednjem planu kada se pomiče. Kliknite donju poveznicu da vidite razliku između web stranice sa i bez paralaksnog pomicanja.
Napomena: Paralaksno pomicanje ne radi uvijek na mobilnim uređajima/pametnim telefonima. Međutim, možete koristiti medijske upite da onemogućite učinak na mobilnim uređajima (pogledajte zadnji primjer na ovoj stranici).
Kako stvoriti efekt pomicanja paralakseUpotrijebite element spremnika i dodajte pozadinsku sliku spremniku s određenom visinom. Zatim upotrijebite background-attachment: fixed za stvaranje stvarnog efekta paralakse. Ostala svojstva pozadine koriste se za savršeno centriranje i skaliranje slike:
Primjer s pikselima
.paralaksa(
/* Korištena slika */
pozadinska slika: url("img_paralaksa.jpg");
/* Postavite određenu visinu */
visina: 500px;
/* Stvaranje efekta pomicanja paralakse */
privitak pozadine: fiksno;
položaj pozadine: centar;
pozadinsko ponavljanje: bez ponavljanja;
veličina pozadine: naslovnica;
}
U gornjem primjeru, pikseli se koriste za postavljanje visine slike. Ako želite koristiti postotke, kao što je 100%, kako bi slika stala na cijeli zaslon, postavite visinu spremnika paralakse na 100%. Napomena: Također morate primijeniti visinu: 100% na i:
Primjer s postotkomtijelo, html (
visina: 100%;
}
Paralaksa (
/* Korištena slika */
pozadinska slika: url("img_paralaksa.jpg");
/* Puna visina */
visina: 100%;
/* Stvaranje efekta pomicanja paralakse */
privitak pozadine: fiksno;
položaj pozadine: centar;
pozadinsko ponavljanje: bez ponavljanja;
veličina pozadine: naslovnica;
Efekt paralakse je vrlo zanimljiva tehnika. Prilikom pomicanja pozadinska se slika pomiče sporije od sadržaja, što rezultira iluzijom 3D prostora. U ovom vodiču ćemo pokazati jednostavan i učinkovit način za postizanje prekrasnog učinka.
ObilježavaOva tehnika se temelji na kontroli brzine kretanja pozadinske slike. Kreirajmo HTML označavanje koje sadrži dva odjeljka s atributima "data-type" i "data-speed" . Svrha atributa bit će otkrivena malo kasnije:
Oznake s atributima vrste podataka i brzine podataka omogućuju vam da svoje označavanje učinite jednostavnim i jasnim.
Prema specifikaciji, svi atributi koji počinju s data- tretirat će se kao privatna pohrana podataka. Osim toga, nemaju utjecaja na predložak.
Budući da moramo kontrolirati brzinu pomicanja pozadinskih slika, koristit ćemo data-type="background" i data-speed="10" za ključne parametre.
Zatim ćemo svakoj oznaci dodati oznaku.
Apsolutno pozicioniranje Jednostavan efekt paralakse
Pozadinu oznake pomicat ćemo sporije od sadržaja, tj. To stvara iluziju paralakse.
CSSPrije nego što prijeđemo na jQuery magiju, dodajmo pozadinske slike svakom elementu u CSS kodu.
#home (pozadina: url(home.jpg) 50% 0 ponavljanje fiksno; min-height: 1000px; ) #about (background: url(about.jpg) 50% 0 bez ponavljanja min-height: 1000px; )
I definirajmo stilove za preostale elemente naše demo stranice.
#home ( background: url(home-bg.jpg) 50% 0 ponavljanje fiksno; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; ) #home article (visina: 458px; pozicija: apsolutna; poravnanje teksta: središte; vrh: 150px; širina: 100%; ) #about (pozadina: url(about-bg.jpg) 50% 0 ponavljanje fiksno; min-visina : 1000px; visina: 1000px; margina: 0 auto; širina: 100%; maks. širina: 1920px; pozicija: relativna; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); box- sjena: 0 0 50px rgba(0,0,0,0.8); ) #o članku (visina: 458px; pozicija: apsolutna; poravnanje teksta: središte; vrh: 150px; širina: 100%; )
Čarobni kodKoristimo jQuery. Počnimo sa standardnom metodom document.ready() kako bismo bili sigurni da je stranica učitana i spremna za manipulaciju.
$(dokument).spreman(funkcija())( ));
Sada nam treba pozornost. Prva stvar koja se ovdje događa je iteracija kroz sve elemente s atributom data-type="background" na stranici.
$(document).ready(function())( $("odjeljak").each(function())( var $bgobj = $(this); // Dodijeli objekt )); ));
Funkciji .each() ćemo dodati još jednu funkciju.scroll() , koja se poziva kada krene pomicanje.
$(prozor).scroll(funkcija () (
Morate odrediti koliko je dugo korisnik skrolao po stranici, a zatim podijelite dobivenu vrijednost s vrijednošću definiranom u atributu brzine podataka.
Var yPos = -($window.scrollTop() / $bgobj.data("brzina"));
$window.scrollTop() - dobiva trenutnu vrijednost pomicanja od vrha. $bgobj.data("brzina") odnosi se na atribut brzine podataka u označavanju. yPos je konačna vrijednost koja se koristi za pomicanje. Međutim, koristi se negativna vrijednost jer se pozadina pomiče u smjeru suprotnom od smjera pomicanja korisnika.
U našem primjeru, atribut brzine podataka postavljen je na 10. Pretpostavimo da se prozor preglednika pomiče 57 px. To znači da je 57px podijeljeno s 10 = 5,7px.
// Prikupljanje položaja pozadine var coords = "50% "+ yPos + "px"; // Premjesti pozadinu $bgobj.css(( backgroundPosition: coords ));
Sada moramo prikupiti sve podatke u jednu vrijednost. Da vodoravni položaj pozadine ostane statičan, koristimo vrijednost od 50% za svojstvo xPosition. Zatim dodajemo yPos kao vrijednost svojstva yPosition, a zatim dodjeljujemo koordinate pozadini: $bgobj.css(( backgroundPosition: coords )); .
Konačni kod će izgledati ovako:
$(document).ready(function())( $("section").each(function())( var $bgobj = $(this); // Dodijelite objekt $(window).scroll(function() ( var yPos = -($window.scrollTop() / $bgobj.data("speed")); // Spojite pozadinske koordinate var coords = "50% "+ yPos + "px"; // Pomaknite pozadinu $bgobj.css ((backgroundPosition: coords )); )); )); ));
Isječak za IEOstaje jedna stvar: starije verzije IE-a ne mogu prikazati i označiti. Popravak je jednostavan; koristit ćemo standardno rješenje za stvaranje elemenata koje će magično natjerati preglednik da prepozna HTML5 oznake.
// Stvaranje elemenata za IE document.createElement("article"); document.createElement("odjeljak");
Dodatno koristimo datoteku za resetiranje CSS-a tako da svi preglednici prikazuju stranicu na isti način.
Svake godine vidimo različite trendove web dizajna kako dolaze i odlaze. A ponekad se dogodi da se određeni "trik" nakon nekog vremena ponovno počne masovno koristiti.
Godine 2012. mnoge su strane stranice koristile vrlo zanimljiv efekt posuđen iz igrica - pomicanje paralakse. To je općenito bilo vrijeme mode za 3D, pa su web stranice pokušali učiniti trodimenzionalnima, višeslojnim.
Nakon godinu-dvije nekako su zaboravili na paralaksu, a one stranice koje su bile svijetli primjeri njezine uporabe doživjele su redizajn, odlučivši se za druge vizualne tehnike. Danas ovaj efekt doživljava preporod i o njemu se ponovno počinje govoriti.
Sjetimo se što je to, gdje ga koristiti i kako, a također razmotrimo nekoliko upečatljivih primjera upotrebe paralakse.
Paralaksno pomicanje - kakva je to zvijer?
Efekt paralakse na web stranicama vrlo je lako prepoznati - koristi više pozadina koje izgledaju kao da se kreću različitim brzinama kako bi se stvorio osjećaj dubine (stvarajući umjetni 3D efekt). Ova tehnika se naširoko koristila u igrama "starog stila", a također je zanimljiv trend u web dizajnu.
Pojam dolazi od grčke riječi "Parallaxis", što znači "promjena". Danas ovaj trend ponovno krči sebi put u svijetu web dizajna.
Pomicanje paralakse može biti standardno, okomito ili vodoravno, te s promjenom smjera.
Ovo je vrlo zanimljiv koncept dizajna koji izgleda nevjerojatno, ali u isto vrijeme zahtijeva mukotrpan rad. Ne morate samo razmišljati o implementaciji, već i naporno raditi na optimizaciji - inače, na mobilnim uređajima ili na velikim zaslonima, slojevi mogu usporiti i ne samo ukrasiti, već jednostavno unakaziti vašu kreaciju.
Kada koristite paralaksu, pokušajte ne napraviti jednu glavnu pogrešku, koja se često nalazi na ovakvim stranicama - glavnom sloju se daje vrlo velika brzina kretanja, a kao rezultat toga, korisnik ne može pravilno vidjeti informacije ili fotografije. Malo sam okrenuo kotač - a fotografija ili tekst već su otišli daleko dolje, pokušao sam ga vratiti - sve je bilo skriveno. Kao npr. U fazi optimizacije obratite pozornost na brzinu pomicanja slojeva; glavni bi se u idealnom slučaju trebao kretati istom brzinom kao i traka za pomicanje. Ali možete se sigurno poigrati s ostalim elementima koji služe za dekoraciju.
Gdje se prijaviti?
Paralaksno pomicanje izgleda sjajno na stranicama s malo sadržaja. Ovo je idealno rješenje za web stranice s jednom stranicom i posjetnice.
Recimo da imate samo kratke informacije o tvrtki, kontakte i nekoliko fotografija. Jednostavna web stranica s takvim sadržajem izgledat će dosadno i nezanimljivo. Ali ako ovdje dodate neobične efekte kao što je paralaksa, korisnici će dugo pamtiti ovaj resurs!
Danas je zapravo vrlo teško privući pozornost ljudi. Mnoga su mjesta puna flash efekata, zvučnih slojeva i drugih neobičnih značajki. Svatko se nastoji istaknuti najbolje što može - zato su se dizajneri ponovno počeli vraćati paralaksi.
Ovaj je efekt također dobar za stranice od jedne stranice koje predstavljaju proizvod ili liniju proizvoda. Razmišljajući o konceptu, možete stvoriti nešto doista jedinstveno.
Nekoliko primjera
Prijeđimo sada s teorije na praksu i razmotrimo nekoliko stranica koje koriste paralaksno pomicanje. Možda ćete u ovoj kolekciji dobiti inspiraciju ili pronaći neke originalne ideje.
Ovdje je originalni katalog cipela, koji osim paralakse koristi još jednu stvar, te zajedno stvaraju poseban ugođaj.
Stranica se, kao što vidite, kreće jednom brzinom, a geometrijski oblici drugom, malo sporijom.
Ovdje paralaksa ponovno ide ruku pod ruku sa zvukom i pomaže ispričati cijelu priču. Osim 3D efekta, ovdje vidimo i druge modne trendove - crno-bijele boje dizajna, ručne crteže, rukom pisane fontove. Ako ste previše lijeni za okretanje kotača, uključite autoscrolling i uživajte.
Dobrodošli u Milano! Uronite u svijet talijanske umjetnosti!
Ovdje vidimo još jedno neobično rješenje - za pregled stranice ne morate okretati kotačić, već povlačiti sadržaj tipkom miša. Štoviše, stranica se može rastezati i na strane i prema dolje.
Također možete slijediti popis u nastavku, stranica će vam sama pokazati pravo mjesto.
Možete li prezentirati rezervne dijelove i ostalu hardver na tako originalan način? Ovo je primjer kako paralaksa može pomoći da web stranica proizvoda bude pamtljiva i zanimljiva, čak i ako je proizvod vrlo specifičan i namijenjen uskom krugu ljudi.
Ovdje je zanimljiva verzija web stranice restorana. Malo je tekstualnog sadržaja, a dizajner je pronašao briljantno rješenje - kombinirati ga sa svijetlim fotografijama koje se nalaze na drugom sloju i kreću se različitom brzinom. Sasvim svježe i originalno.
Ovdje vidimo prekrasne 3D efekte, koji se stvaraju korištenjem videa u pozadini, fotografija različitih veličina, pa čak i zamućenja onih elemenata koji se čine "korisniku ispred nosa". I različite brzine kretanja slojeva, naravno.
Upečatljiv primjer nestandardnog pristupa paralaksi. Pozadina koja se sama pomiče u kombinaciji s tekstom koji se pomiče prema dolje; 3D modeli kreirani s desne strane; mijenjanje pozadinskih boja dok se pomičete - sve to čini stranicu doista nezaboravnom.
Objavljujemo implementaciju vrlo jednostavnog Parallax efekta prilikom pomicanja stranice. Ovaj efekt paralakse ne samo da je vrlo lako instalirati i konfigurirati, već je i sama skripta paralakse mala i ne zahtijeva dodatne postavke. Ova skripta radi s povezanom bibliotekom jQuery.
IZVORI
povezivanje efekta paralakse jednostavno je kao guljenje krušaka i radi s povezanom bibliotekom jQuery.
Verzija jQuery u arhivi je jquery-1.11.3.min.js Ali ovaj efekt paralakse radi i s novijim verzijama jQuery biblioteke i sa starijima. Provjerio sam!
Stoga prvo povezujemo jQuery s HTML dokumentom, a zatim samu skriptu parallax.min.js
Veza izgleda ovako:
Pa, sada HTML CSS paralaksna vezaUzmite blok, može biti zaglavlje, odjeljak, div, podnožje.
Imenujte div blok posebno bilo kojom klasom i dodijelite mu:
širina: 100%
min-visina: 400px;
Iako ovo nije važno.
odjeljak class="paralaksa"
CSS .parallax ( min-height: 400px; background: transparent; ) Obavezni atributi paralakse
data-parallax="scroll" - potreban za pokretanje skripte;
data-image-src="img/bg_4.jpg - slika, odnosno put do slike;
Stranica razvojnog programera pruža potpuni popis atributa.
class="parallax" - bilo koja klasa, ovo je napisano gore.
section class="parallax" - natpis unutar bloka s efektom paralakse, u ovom slučaju naslov.
Materijal je preuzet iz stranih. I predstavljen je samo u informativne svrhe.