✅ Paralakso efekto svetainė

Turinys

HTML kodas
CSS kodas
„JavaScript“ kodas

Šiuo metu turime daug įvairių tinklalapių, kuriuose galima įgyvendinti skirtingus dizaino modelius, pradedant klasikiniu plokščiu dizainu arba naujovišku naujuoju medžiagos dizainu.

Tačiau yra visiškai kitoks ir savitas būdas sukurti svetaines, svetaines, kurios yra tik informacinės ir neturi labai sudėtingų funkcijų. Šiais atvejais galime naudoti vieno puslapio svetainę, kuri įgyvendina efektą Paralaksas.

Šis efektas suteikia mums jausmą, kad turime kelias plokštumas ir net kelis puslapius viename. Tada pažiūrėkime, kaip mes galime tai įgyvendinti.

HTML kodas

Mūsų HTML Jį sudarys gana paprasta struktūra, sudaryta iš div, kurią pagal tam tikras klases identifikuosime kaip konteinerius, be to, įprastu būdu pateiksime savo stiliaus lapus, taip pat „JavaScript“. Šiame pavyzdyje mes pasikliausime abiem „jQuery“ Kaip Underscore.js tai biblioteka, kuri suteikia mums keletą funkcijų, kurios padės mums atlikti šį pratimą:

Pagrindinis paralaksas

„Skyfall“

1 filmas

Profesionalus

2 filmas

Rezervuaro šunys

3 filmas

CSS kodas

Savo stiliaus lape dar šiek tiek dirbsime, naudosime jo savybes CSS3 atžvilgiu transformuoja norėdami judėti aukštyn arba žemyn savo fone, be to, mes naudosime savo dokumento vaikus priskirti skirtingus fono paveikslėlius, kurie bus naudojami kaip keli mūsų puslapiai, pažiūrėkime šį mūsų fragmentą CSS:

 .background {background-size: cover; fono kartojimas: nekartoti; fono padėtis: centro centras; perteklius paslėptas; valia keisis: transformuosis; -webkit-backface-matomumas: paslėptas; matomumas ant nugaros: paslėptas; aukštis: 130vh; padėtis: fiksuota; plotis: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformuoti: translateY (30vh); -webkit-perėjimas: visi 1,2s kubiniai-bezier (0,22, 0,44, 0, 1); perėjimas: visi 1,2s kubiniai-bezier (0,22, 0,44, 0, 1); } .fonas: prieš {content: ""; pozicija: absoliuti; plotis: 100%; aukštis: 100%; viršuje: 0; kairėje: 0; dešinėje: 0; apačioje: 0; fono spalva: rgba (0, 0, 0, 0,3); }. Background: first-child {background-image: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transformuoti: translateY (-15vh); }. Background: first-child .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformuoti: translateY (15vh); } .fonas: n-as vaikas (2) {fono paveikslėlis: url (theprofessional.jpg.webp); } .fonas: n-asis vaikas (3) {fono paveikslėlis: url (rezervoirdogs.png.webp); }. fonas: n-as vaikas (1) {z-indeksas: 3; }. fonas: n-as vaikas (2) {z-indeksas: 2; } .fonas: n-as vaikas (3) {z-indeksas: 1; }

Norėdami užbaigti savo stiliaus lapą, pritaikysime kai kuriuos teksto, kuris bus įtrauktas į kiekvieną sudėtinį rodinį, pakeitimus, taip pat perėjimą, kurį kiekvienas iš jų turi atlikti pagal svetainės slinktį, nurodydamas, ar judame aukštyn arba žemyn

 .content-wrapper {aukštis: 100vh; ekranas: -webkit -box; ekranas: -webkit -flex; ekranas: -ms -flexbox; ekranas: lankstus; -webkit-box-pack: centras; -webkit-õiginti-turinys: centras; -ms-flex-pack: centras; pagrįsti turinį: centras; text-align: centre; -webkit-flex-flow: stulpelis nowrap; -ms-flex-flow: stulpelis nowrap; flex-flow: stulpelis nowrap; spalva: #fff; šriftų šeima: Montserrat; text-transform: didžiosios raidės; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformuoti: translateY (40vh); valia keisis: transformuosis; -webkit-backface-matomumas: paslėptas; matomumas ant nugaros: paslėptas; -webkit-perėjimas: visi 1,7s kubiniai-bezier (0,22, 0,44, 0, 1); perėjimas: visi 1,7s kubiniai-bezier (0,22, 0,44, 0, 1); } .content-title {font-size: 12vh; linijos aukštis: 1,4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transformuoti: translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformuoti: translateY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); transformuoti: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformuoti: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transformuoti: translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformuoti: translateY (40vh); } .background.down-scroll + .background: not (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transformuoti: translate3d (0, -15vh, 0); } .background.down-scroll + .background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformuoti: translateY (15vh); }

„JavaScript“ kodas

Pagaliau mūsų „JavaScript“ mes susitvarkysime, kas yra klausytojas apie mūsų įvykius, tai yra žinoti, kada vartotojas naudoja slinkimą pele, norėdamas naršyti tinklalapį. Be to, mes aptiksime naudojamą naršyklę ir nustatysime keletą pastovių reikšmių, pvz., Trukmę, kurią turi turėti slankiklis, kad vėl būtų galima ją pakeisti, slinkties jautrumą ir turimų puslapių skaičių.

 var laikas = klaidingas; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var jautrumas Scroll = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". fonas"). ilgis; funkcija parallaxeffect (evt) {if (esFirefox) {delta = evt.detail * (-120); } else if (esInternetE) {delta = -evt.deltaY; } else {delta = evt.wheelDelta; } if (laikas! = tiesa) {if (delta = ScrollSensitivity) {laikas = tiesa; if (currentSlider! == 0) {currentSlider--; } previousItem (); durationSliderTime (durationSliders); }}}

Galiausiai nustatysime laiką, per kurį vaizdas turi būti pritvirtintas, kad būtų galima pereiti prie kito, taip pat mūsų renginių klausytojus, be to, naudosime klasės pridėjimo ar pašalinimo funkciją, kad žinotume, kada vienas iš vaizdų apačioje arba viršuje:

 funkcija timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = yra „Firefox“? "DOMMouseScroll": "ratas"; window.addEventListener („ScrollMouse“ įvykis, _. droselis (paralakso efektas, 60), klaidingas); funkcija eleNext () {var $ slidePrevious = $ (". fonas"). eq (currentSlider - 1); $ slideAnterior.removeClass ("aukštyn-slinkti"). addClass ("slinkti žemyn"); } function previousItem () {var $ slideSig = $ (". background"). eq (currentSlider); $ slideSig.removeClass ("slinkti žemyn"). addClass ("aukštyn-slinkti"); }

Baigę kodą, turime tik išbandyti savo programos veikimą, tam turime naudoti pelės slinktį, kad pamatytume elgesį, pažiūrėkime:

Šis efektas suteikia mūsų svetainėms visiškai naują pojūtį, tačiau patartina jį naudoti tam tikrose programose, pvz., Portfeliuose ar informacijos puslapiuose, nes bet kuri kita svetainė, kurioje tvarkomi kitokio pobūdžio procesai ar informacija, pavargs ir pavargs vartotojui. …