Parallax effekt nettsted

Vi har for tiden et bredt utvalg av websider, som kan implementere forskjellige designmønstre, som kan variere fra en klassisk flat design eller det innovative innovative Material Design.

Men det er en ganske annen og særegen måte å lage nettsteder, nettsteder som bare er informative og ikke har en veldig kompleks funksjonalitet som sådan. I disse tilfellene kan vi bruke et enkelt sider nettsted som implementerer effekten Parallaks.

Denne effekten gir oss følelsen av at vi har flere fly og til og med flere sider på en. La oss se hvordan vi kan implementere det.

HTML -kode

Våre HTML Den vil være sammensatt av en ganske enkel struktur, sammensatt av div som vi vil identifisere som beholdere i henhold til visse klasser, i tillegg til dette vil vi inkludere stilarkene våre på vanlig måte, så vel som våre JavaScript. For dette eksemplet vil vi stole på begge deler jQuery som Underscore.js som er et bibliotek som gir oss flere funksjoner som vil hjelpe oss med denne øvelsen:

 Home Parallax
Himmelfall
Film 1
Den profesjonelle
Film 2
Reservoarhunder
Film 3

CSS -kode

For vårt stilark vil vi jobbe litt mer vi vil bruke egenskapene til CSS3 når det gjelder transformerer For å gi effekten av å flytte opp eller ned i bakgrunnen vår, i tillegg til dette vil vi bruke barna i dokumentet vårt til å tildele forskjellige bakgrunnsbilder som vil fungere som våre flere sider. La oss se dette fragmentet av våre CSS:

 .bakgrunn {bakgrunnsstørrelse: omslag; bakgrunn-gjenta: nei-gjenta; bakgrunn-posisjon: senter senter; overløp: skjult; vilje-endring: transformere; -webkit-backface-synlighet: skjult; bakside-synlighet: skjult; høyde: 130vh; posisjon: fast; bredde: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transform: translateY (30vh); -webkit-overgang: alle 1,2s kubikk-bezier (0,22, 0,44, 0, 1); overgang: alle 1,2s cubic-bezier (0,22, 0,44, 0, 1); } .bakgrunn: før {content: ""; posisjon: absolutt; bredde: 100%; høyde: 100%; topp: 0; venstre: 0; høyre: 0; bunn: 0; bakgrunnsfarge: rgba (0, 0, 0, 0.3); } .bakgrunn: første barn {bakgrunnsbilde: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transform: translateY (-15vh); } .bakgrunn: førstebarn .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); } .bakgrunn: nth-barn (2) {bakgrunnsbilde: url (theprofessional.jpg.webp); } .bakgrunn: nth-barn (3) {bakgrunnsbilde: url (reservoirdogs.png.webp); } .bakgrunn: n-barn (1) {z-indeks: 3; } .bakgrunn: n-barn (2) {z-indeks: 2; } .bakgrunn: n-barn (3) {z-indeks: 1; }

For å avslutte med stilarket, vil vi bruke noen endringer på teksten som vil være inkludert i hver beholder, samt overgangen som hver av disse må gjøre i henhold til rullen vi gjør til nettstedet, som indikerer om vi beveger oss oppover eller ned

 .content-wrapper {høyde: 100vh; display: -webkit -box; display: -webkit -flex; display: -ms -flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: senter; justify-content: center; tekstjustering: senter; -webkit-flex-flow: kolonne nowrap; -ms-flex-flow: kolonne nowrap; flex-flow: kolonne nårap; farge: #fff; font-familie: Montserrat; tekst-transform: store bokstaver; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transform: translateY (40vh); vilje-endring: transformere; -webkit-backface-synlighet: skjult; bakside-synlighet: skjult; -webkit-overgang: alle 1,7s cubic-bezier (0,22, 0,44, 0, 1); overgang: alle 1,7s cubic-bezier (0,22, 0,44, 0, 1); } .content-title {font-size: 12vh; linjehøyde: 1,4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transform: translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); transform: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transform: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transform: translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transform: translateY (40vh); } .background.down-scroll + .background: not (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transform: translate3d (0, -15vh, 0); } .background.down-scroll + .background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); }

JavaScript -kode

Endelig i vår JavaScript vi vil håndtere hva som er lytteren av våre hendelser, det vil si å vite når brukeren bruker musen til å bla gjennom nettsiden. I tillegg til dette, vil vi oppdage nettleseren som brukes og etablere noen konstante verdier, for eksempel varigheten som en glidebryter må ha før den kan endres igjen, rullens følsomhet og antall sider vi vil ha.

 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 følsomhet Scroll = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". bakgrunn"). lengde; funksjon parallakseffekt (evt) {if (esFirefox) {delta = evt.detail * (-120); } annet hvis (esInternetE) {delta = -evt.deltaY; } annet {delta = evt.wheelDelta; } if (time! = true) {if (delta = ScrollSensitivity) {time = true; if (currentSlider! == 0) {currentSlider--; } previousItem (); durationSliderTime (durationSliders); }}}

Til slutt skal vi fastslå tidspunktet for at bildet må fikses for å gå til det neste, så vel som lytterne til hendelsene våre. I tillegg vil vi bruke funksjonen til å legge til eller fjerne klasse for å vite når et av bildene er nederst eller øverst:

 function timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = er Firefox? "DOMMouseScroll": "hjul"; window.addEventListener (ScrollMouse -hendelse, _.throttle (Parallax -effekt, 60), false); funksjon eleNext () {var $ slidePrevious = $ (". bakgrunn"). eq (currentSlider - 1); $ slideAnterior.removeClass ("opp-rulling"). addClass ("ned-rull"); } funksjon previousItem () {var $ slideSig = $ (". bakgrunn"). eq (currentSlider); $ slideSig.removeClass ("ned-bla"). addClass ("opp-rull"); }

Når koden vår er ferdig, trenger vi bare å teste driften av applikasjonen vår, for dette trenger vi bare å bruke musens rulle for å se atferden, la oss se:

Denne effekten gir en ganske frisk følelse til nettstedene våre, men det er tilrådelig å bruke den i visse applikasjoner, for eksempel porteføljer eller informasjonssider, siden ethvert annet nettsted som håndterer andre typer prosesser eller informasjon vil gjøre brukeren sliten og miste interessen for den …