Satura rādītājs
Pašlaik mums ir visdažādākās tīmekļa lapas, kurās var īstenot dažādus dizaina modeļus, sākot no klasiska plakana dizaina vai novatoriska jauna materiāla dizaina.
Bet ir pavisam cits un savdabīgs veids, kā izveidot tīmekļa vietnes, vietnes, kas ir tikai informatīvas un kurām nav ļoti sarežģītas funkcionalitātes. Šādos gadījumos mēs varam izmantot vienas lapas vietni, kas īsteno efektu Parallax.
Šis efekts rada sajūtu, ka mums ir vairākas lidmašīnas un pat vairākas lapas vienā. Paskatīsimies, kā mēs to varam īstenot.
HTML kods
Mūsu HTML To veidos diezgan vienkārša struktūra, kas sastāv no div, ko mēs identificēsim kā konteinerus atbilstoši noteiktām klasēm, turklāt mēs iekļausim mūsu stila lapas parastajā veidā, kā arī mūsu JavaScript. Šajā piemērā mēs paļausimies uz abiem jQuery patīk Underscore.js kas ir bibliotēka, kas nodrošina vairākas funkcijas, kas mums palīdzēs šajā uzdevumā:
Mājas paralakssKritiens no debesīm
Filma 1
Profesionālis
2. filma
Rezervuāra suņi
Filma 3
CSS kods
Mūsu stila lapai mēs strādāsim nedaudz vairāk, mēs izmantosim īpašības CSS3 attiecībā uz pārveido lai panāktu, ka mēs pārvietojamies uz augšu vai uz leju, papildus tam mēs izmantosim mūsu dokumenta bērnus, lai piešķirtu dažādus fona attēlus, kas kalpos kā mūsu vairākas lapas, apskatīsim šo mūsu fragmentu CSS:
.background {background-size: cover; fona atkārtošana: neatkārtot; fona stāvoklis: centra centrs; pārplūde: slēpta; gribas maiņa: pārveidot; -Webkit-backface-redzamība: slēpta; redzamība aizmugurē: slēpta; augstums: 130 vh; stāvoklis: fiksēts; platums: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); pārveidot: translateY (30vh); -webkit-pāreja: visi 1,2s kubik-bezier (0,22, 0,44, 0, 1); pāreja: visi 1,2 s kubik-bezier (0,22, 0,44, 0, 1); }. Background: pirms {content: ""; pozīcija: absolūta; platums: 100%; augstums: 100%; augšā: 0; pa kreisi: 0; pa labi: 0; apakšā: 0; fona krāsa: rgba (0, 0, 0, 0,3); } .fons: pirmais bērns {fona attēls: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); pārveidot: translateY (-15vh); }. Background: first-child .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); pārveidot: translateY (15vh); } .fons: n-tas bērns (2) {fona attēls: url (theprofessional.jpg.webp); }. Background: n-bērns (3) {background-image: url (rezervoirdogs.png.webp); } .fons: n-tas bērns (1) {z-indekss: 3; } .fons: n-tas bērns (2) {z-indekss: 2; } .fons: n-tas bērns (3) {z-indekss: 1; }Lai pabeigtu mūsu stila lapu, mēs lietosim dažas izmaiņas tekstā, kas tiks iekļauts katrā konteinerā, kā arī pāreju, kas jāveic katrai no tām saskaņā ar tīmekļa vietnes ritināšanu, norādot, vai virzāmies uz augšu vai uz leju
.content-wrapper {augstums: 100 vh; displejs: -webkit -box; displejs: -webkit -flex; displejs: -ms -flexbox; displejs: elastīgs; -webkit-box-pack: centrs; -webkit-taisnot-saturs: centrs; -ms-flex-pack: centrs; attaisnot saturu: centrs; text-align: center; -webkit-flex-flow: kolonna nowrap; -ms-flex-flow: kolonna nowrap; elastīga plūsma: kolonna nowrap; krāsa: #fff; fontu saime: Montserrat; teksta pārveidošana: lielie burti; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); pārveidot: translateY (40vh); gribas maiņa: pārveidot; -webkit-backface-redzamība: slēpta; redzamība aizmugurē: slēpta; -webkit-pāreja: visi 1,7s kubik-bezier (0,22, 0,44, 0, 1); pāreja: visi 1,7s kubik-bezier (0,22, 0,44, 0, 1); } .content-title {font-size: 12vh; līnijas augstums: 1,4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); pārveidot: translate3d (0, -15vh, 0); }. Background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); pārveidot: translateY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); pārveidot: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); pārveidot: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); pārveidot: translate3d (0, -130vh, 0); }. Background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); pārveidot: translateY (40vh); }. Background.down-scroll +. Background: not (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); pārveidot: translate3d (0, -15vh, 0); }. Background.down-scroll +. Background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); pārveidot: translateY (15vh); }
JavaScript kods
Beidzot mūsu JavaScript mēs tiksim galā ar to, kas ir klausītājs mūsu notikumiem, tas ir, lai uzzinātu, kad lietotājs izmanto peles ritināšanu, lai ritinātu tīmekļa lapu. Papildus tam mēs noteiksim izmantoto pārlūkprogrammu un noteiksim dažas nemainīgas vērtības, piemēram, ilgumu, kas slīdnim jābūt, lai to atkal varētu mainīt, ritināšanas jutību un mums pieejamo lapu skaitu.
var laiks = nepatiess; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var jutība Ritiniet = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". background"). length; funkcija parallaxeffect (evt) {if (esFirefox) {delta = evt.detail * (-120); } cits if (esInternetE) {delta = -evt.deltaY; } cits {delta = evt.wheelDelta; } ja (laiks! = true) {if (delta = ScrollSensitivity) {laiks = true; ja (currentSlider! == 0) {currentSlider--; } previousItem (); durationSliderTime (durationSliders); }}}Visbeidzot, mēs noteiksim laiku, kad attēls ir jānostiprina, lai pārietu uz nākamo attēlu, kā arī mūsu notikumu klausītājus, turklāt mēs izmantosim klases pievienošanas vai noņemšanas funkciju, lai uzzinātu, kad kāds no attēliem ir apakšā vai augšpusē:
funkcija timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = ir Firefox? "DOMMouseScroll": "ritenis"; window.addEventListener (ScrollMouse notikums, _.throttle (Parallax efekts, 60), false); funkcija eleNext () {var $ slidePrevious = $ (". background"). eq (currentSlider - 1); $ slideAnterior.removeClass ("augšup ritināšana"). addClass ("ritināšana uz leju"); } function previousItem () {var $ slideSig = $ (". background"). eq (currentSlider); $ slideSig.removeClass ("ritināt uz leju"). addClass ("augšup ritināt"); }Kad mūsu kods ir pabeigts, mums tikai jāpārbauda mūsu lietojumprogrammas darbība, lai to izdarītu, mums ir jāizmanto tikai peles ritinājums, redzēsim:
Šis efekts mūsu vietnēm rada pavisam jaunu sajūtu, tomēr ieteicams to izmantot noteiktās lietojumprogrammās, piemēram, portfeļos vai informācijas lapās, jo jebkura cita vietne, kas apstrādā cita veida procesus vai informāciju, nogurdinās lietotāju un zaudēs interesi par to. …
