Parallax effekt websted

Vi har i øjeblikket en lang række websider, der kan implementere forskellige designmønstre, som kan variere fra et klassisk fladt design eller det innovative nye Material Design.

Men der er en helt anden og ejendommelig måde at lave websteder på, websteder, der blot er informative og ikke har en meget kompleks funktionalitet som sådan. I disse tilfælde kan vi bruge et enkelt sides websted, der implementerer effekten Parallaks.

Denne effekt giver os følelsen af, at vi har flere planer og endda flere sider på én. Lad os så se, hvordan vi kan implementere det.

HTML -kode

Vores HTML Det vil være sammensat af en ret enkel struktur, sammensat af div, som vi vil identificere som beholdere i henhold til bestemte klasser, ud over dette vil vi inkludere vores typografiark på den sædvanlige måde, såvel som vores JavaScript. I dette eksempel vil vi stole på begge dele jQuery synes godt om Underscore.js som er et bibliotek, der giver os flere funktioner, der hjælper os med denne øvelse:

 Hjem Parallax
Skyfall
Film 1
Den Professionelle
Film 2
Reservoir Dogs
Film 3

CSS -kode

Til vores typografiark vil vi arbejde lidt mere, vi vil bruge egenskaberne til CSS3 i forhold til forvandler for at give effekten af ​​at flytte op eller ned i vores baggrunde, ud over dette vil vi bruge børnene i vores dokument til at tildele forskellige baggrundsbilleder, der fungerer som vores flere sider, lad os se dette fragment af vores CSS:

 .baggrund {baggrundsstørrelse: cover; baggrund-gentag: ingen-gentagelse; baggrund-position: center center; overløb: skjult; vilje-ændre: transformere; -webkit-backface-synlighed: skjult; bagflade-synlighed: skjult; højde: 130vh; position: fast; bredde: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transform: translateY (30vh); -webkit-overgang: alle 1,2s cubic-bezier (0,22, 0,44, 0, 1); overgang: alle 1,2s cubic-bezier (0,22, 0,44, 0, 1); } .baggrund: før {indhold: ""; position: absolut; bredde: 100%; højde: 100%; top: 0; venstre: 0; højre: 0; bund: 0; baggrundsfarve: rgba (0, 0, 0, 0.3); } .baggrund: første barn {baggrundsbillede: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transform: translateY (-15vh); } .baggrund: first-child .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); } .baggrund: nth-barn (2) {baggrundsbillede: url (theprofessional.jpg.webp); } .baggrund: nth-barn (3) {baggrundsbillede: url (reservoirdogs.png.webp); } .baggrund: n-barn (1) {z-indeks: 3; } .baggrund: n-barn (2) {z-indeks: 2; } .baggrund: n-barn (3) {z-indeks: 1; }

For at afslutte med vores typografiark vil vi anvende nogle ændringer på teksten, der vil være inkluderet i hver beholder, samt overgangen, som hver af disse skal foretage i henhold til den rulle, vi foretager til webstedet, hvilket angiver, om vi flytter op eller ned

 .indholdsindpakning {højde: 100vh; display: -webkit -box; display: -webkit -flex; display: -ms -flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; tekstjustering: center; -webkit-flex-flow: kolonne nurap; -ms-flex-flow: søjle nurap; flex-flow: søjle nurap; farve: #fff; font-familie: Montserrat; tekst-transform: store bogstaver; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transform: translateY (40vh); vilje-ændre: transformere; -webkit-backface-synlighed: skjult; bagflade-synlighed: 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øjde: 1,4; } .baggrund.up-rul {-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); } .baggrund.up-rul + .baggrund {-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); } .baggrund.down-scroll + .baggrund: ikke (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transform: translate3d (0, -15vh, 0); } .baggrund.down-scroll + .baggrund: ikke (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); }

JavaScript -kode

Endelig i vores JavaScript vi håndterer hvad der er lytter af vores begivenheder, det vil sige at vide, hvornår brugeren bruger musen til at rulle gennem websiden. Ud over dette vil vi registrere den anvendte browser og etablere nogle konstante værdier, f.eks. Den varighed, en skyder skal have, før den kan ændres igen, rullens følsomhed og antallet af sider, vi vil have.

 var tid = falsk; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var følsomhed Scroll = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". baggrund"). længde; funktion parallaxeffekt (evt) {if (esFirefox) {delta = evt.detail * (-120); } ellers hvis (esInternetE) {delta = -evt.deltaY; } ellers {delta = evt.wheelDelta; } hvis (tid! = sand) {hvis (delta = ScrollSensitivity) {tid = sand; hvis (currentSlider! == 0) {currentSlider--; } previousItem (); durationSliderTime (durationSliders); }}}

Endelig skal vi fastslå det tidspunkt, hvor billedet skal rettes for at gå til det næste, såvel som lytterne til vores begivenheder. Desuden vil vi bruge funktionen til at tilføje eller fjerne klasse for at vide, hvornår et af billederne er i bunden eller toppen:

 function timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = er Firefox? "DOMMouseScroll": "hjul"; window.addEventListener (ScrollMouse -hændelse, _.throttle (Parallax -effekt, 60), falsk); funktion eleNext () {var $ slidePrevious = $ (". baggrund"). eq (currentSlider - 1); $ slideAnterior.removeClass ("op-scroll"). addClass ("ned-scroll"); } funktion previousItem () {var $ slideSig = $ (". baggrund"). eq (currentSlider); $ slideSig.removeClass ("ned-scroll"). addClass ("op-scroll"); }

Når vores kode er færdig, skal vi kun teste driften af ​​vores applikation, til dette skal vi kun bruge musens rulle til at se adfærden, lad os se:

Denne effekt giver en ganske frisk følelse til vores websteder, men det er tilrådeligt at bruge det i visse applikationer, f.eks. Porteføljer eller informationssider, da ethvert andet websted, der håndterer andre typer processer eller oplysninger, vil gøre brugeren træt og miste interessen for det …