✅ Web stranica s učinkom Parallax

Sadržaj

HTML kod
CSS kod
JavaScript kod

Trenutno imamo veliki izbor web stranica koje mogu implementirati različite dizajnerske uzorke, koji se mogu kretati od klasičnog ravnog dizajna do inovativnog novog dizajna materijala.

No postoji sasvim drugačiji i osebujan način izrade web stranica koje su samo informativnog karaktera i nemaju tako složenu funkcionalnost. U tim slučajevima možemo koristiti web stranicu s jednom stranicom koja implementira učinak Parallax.

Ovaj učinak daje nam osjećaj da imamo više ravnina, pa čak i više stranica u jednoj. Pogledajmo onda kako to možemo provesti.

HTML kod

Naše HTML Sastojat će se od prilično jednostavne strukture, sastavljene od div -a koje ćemo prema određenim klasama identificirati kao spremnike, osim toga uključit ćemo naše stilske tablice na uobičajen način, kao i naše JavaScript. U ovom ćemo se primjeru oslanjati na oboje jQuery Kao Underscore.js koja je knjižnica koja nam pruža nekoliko funkcionalnosti koje će nam pomoći u ovoj vježbi:

Kućna paralaksa

Skyfall

Film 1

Profesionalac

Film 2

Psi rezervoari

Film 3

CSS kod

Za naš stilski list poradit ćemo još malo, upotrijebit ćemo svojstva CSS3 u odnosu na preobražava kako bismo postigli učinak pomicanja gore ili dolje naše pozadine, osim toga koristit ćemo potomke našeg dokumenta za dodjeljivanje različitih pozadinskih slika koje će nam poslužiti kao više stranica, pogledajmo ovaj fragment našeg CSS:

 . pozadina {background-size: cover; background-repeat: bez ponavljanja; pozadinski položaj: središte središta; preljev: skriven; volja-promjena: preobraziti; -webkit-backface-visibility: hidden; pozadinska vidljivost: skriveno; visina: 130vh; položaj: fiksno; širina: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformirati: translateY (30vh); -webkit-prijelaz: svi 1,2s kubni-bezier (0,22, 0,44, 0, 1); prijelaz: svi 1.2s kubni-bezier (0.22, 0.44, 0, 1); }. pozadina: prije {content: ""; položaj: apsolutni; širina: 100%; visina: 100%; vrh: 0; lijevo: 0; desno: 0; dolje: 0; boja pozadine: rgba (0, 0, 0, 0,3); }. pozadina: prvo dijete {background-image: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transformirati: translateY (-15vh); }. pozadina: prvo-dijete .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformirati: translateY (15vh); }. pozadina: nth-child (2) {background-image: url (theprofessional.jpg.webp); }. pozadina: nth-child (3) {background-image: url (reservoirdogs.png.webp); }. pozadina: nth-child (1) {z-index: 3; }. pozadina: nth-child (2) {z-index: 2; }. pozadina: nth-child (3) {z-index: 1; }

Za kraj sa stilskim listom primijenit ćemo neke izmjene na tekst koji će biti uključen u svaki spremnik, kao i prijelaz koji svaki od njih mora izvršiti u skladu s pomakom koji vršimo na web stranicu, pokazujući idemo li prema gore ili dolje

 .content-wrapper {visina: 100vh; prikaz: -webkit -box; prikaz: -webkit -flex; prikaz: -ms -flexbox; zaslon: flex; -webkit-box-pack: centar; -webkit-justify-content: centar; -ms-flex-pack: centar; justify-content: centar; poravnavanje teksta: središte; -webkit-flex-flow: stupac nowrap; -ms-flex-flow: stupac nowrap; flex-flow: stupac nowrap; boja: #fff; obitelj fontova: Montserrat; tekstualna transformacija: velika slova; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformirati: translateY (40vh); volja-promjena: preobraziti; -webkit-backface-visibility: hidden; pozadinska vidljivost: skriveno; -webkit-prijelaz: svi 1.7s kubni-bezier (0.22, 0.44, 0, 1); prijelaz: svi 1.7s kubni-bezier (0.22, 0.44, 0, 1); } .content-title {font-size: 12vh; visina crte: 1,4; }. background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transformirati: prevesti3d (0, -15vh, 0); }. background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformirati: translateY (15vh); }. background.up-scroll +. background {-webkit-transform: translate3d (0, 30vh, 0); transformirati: translate3d (0, 30vh, 0); }. background.up-scroll +. background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformirati: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transformirati: translate3d (0, -130vh, 0); }. background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformirati: translateY (40vh); }. background.down-scroll +. background: not (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transformirati: prevesti3d (0, -15vh, 0); }. background.down-scroll +. background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformirati: translateY (15vh); }

JavaScript kod

Konačno u našem JavaScript riješit ćemo ono što je slušatelj naših događaja, odnosno znati kada korisnik koristi pomičnicu miša za kretanje po web stranici. Osim toga, otkriti ćemo korišteni preglednik i ustanovit ćemo neke konstantne vrijednosti, kao što su trajanje koje klizač mora imati prije nego što se ponovno može promijeniti, osjetljivost pomicanja i broj stranica koje ćemo imati.

 var time = false; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var osjetljivost Svitak = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". background"). length; funkcija parallaxeffect (evt) {if (esFirefox) {delta = evt.detail * (-120); } else if (esInternetE) {delta = -evt.deltaY; } else {delta = evt.wheelDelta; } if (vrijeme! = true) {if (delta = Osjetljivost pomaka) {vrijeme = istinito; if (currentSlider! == 0) {currentSlider--; } previousItem (); durationSliderTime (durationSliders); }}}

Konačno, ustanovit ćemo vrijeme u kojem se slika mora popraviti za prelazak na sljedeću, kao i slušatelje naših događaja, dodatno ćemo koristiti funkciju dodavanja ili uklanjanja razreda kako bismo znali kada je jedna od slika pri dnu ili vrhu:

 funkcija timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = je li Firefox? "DOMMouseScroll": "kotač"; window.addEventListener (ScrollMouse događaj, _.throttle (Parallax efekt, 60), false); funkcija eleNext () {var $ slidePrevious = $ (". pozadina"). eq (currentSlider - 1); $ slideAnterior.removeClass ("pomicanje prema gore"). addClass ("pomicanje prema dolje"); } funkcija previousItem () {var $ slideSig = $ (". background"). eq (currentSlider); $ slideSig.removeClass ("prema dolje"). addClass ("prema gore"); }

Kad je naš kod dovršen, preostaje nam samo testirati rad naše aplikacije, za to nam je potrebno samo da se pomaknemo mišem da bismo vidjeli ponašanje, da vidimo:

Ovaj učinak daje posve svjež osjećaj našim web stranicama, međutim preporučljivo je koristiti ga u određenim aplikacijama, poput portfelja ili stranica s informacijama, jer će svaka druga web stranica koja obrađuje druge vrste procesa ili informacija umoriti korisnika i izgubiti interes za njega …