✅ Site-ul efect paralela

Cuprins

Cod HTML
Cod CSS
Cod JavaScript

În prezent, avem o mare varietate de pagini web, care pot implementa diferite modele de design, care pot varia de la un design plat clasic sau noul design material inovator.

Dar există un mod destul de diferit și particular de a crea site-uri web, site-uri care sunt doar informative și nu au o funcționalitate foarte complexă ca atare. Pentru aceste cazuri putem folosi un site web cu o singură pagină care implementează efectul Parallax.

Acest efect ne dă senzația că avem mai multe planuri și chiar mai multe pagini într-unul. Să vedem atunci cum o putem implementa.

Cod HTML

Al nostru HTML Acesta va fi compus dintr-o structură destul de simplă, compusă din div, pe care le vom identifica ca containere în funcție de anumite clase, în plus, vom include foile de stil în mod obișnuit, precum și JavaScript. Pentru acest exemplu ne vom baza pe ambele jQuery ca Underscore.js care este o bibliotecă care ne oferă mai multe funcționalități care ne vor ajuta cu acest exercițiu:

Home Parallax

Skyfall

Filmul 1

Profsionistul

Filmul 2

Câini de rezervor

Filmul 3

Cod CSS

Pentru foaia noastră de stil vom lucra puțin mai mult, vom folosi proprietățile lui CSS3 referitor la transformă pentru a da efectul de a ne deplasa în sus sau în jos pe fundalurile noastre, în plus față de acesta vom folosi copiii documentului nostru pentru a atribui diferite imagini de fundal care vor servi drept pagini multiple, să vedem acest fragment din CSS:

 . fundal {fundal-dimensiune: copertă; background-repeat: no-repeat; fundal-poziție: centru centru; overflow: ascuns; will-change: transforma; -webkit-backface-visible: ascuns; backface-vizibilitate: ascuns; înălțime: 130vh; poziție: fixă; lățime: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transform: translateY (30vh); -webkit-tranziție: toate 1.2s cub-bezier (0.22, 0.44, 0, 1); tranziție: toate 1.2s cub-bezier (0.22, 0.44, 0, 1); }. fundal: înainte de {content: ""; poziție: absolută; lățime: 100%; înălțime: 100%; sus: 0; stânga: 0; dreapta: 0; jos: 0; culoare de fundal: rgba (0, 0, 0, 0,3); }. fundal: primul copil {background-image: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transform: translateY (-15vh); }. fundal: first-child .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); }. fundal: nth-child (2) {background-image: url (theprofessional.jpg.webp); }. fundal: nth-child (3) {background-image: url (reservoirdogs.png.webp); }. fundal: nth-child (1) {z-index: 3; }. fundal: nth-child (2) {z-index: 2; }. fundal: nth-child (3) {z-index: 1; }

Pentru a finaliza cu foaia noastră de stil, vom aplica unele modificări textului care va fi inclus în fiecare container, precum și tranziția pe care fiecare dintre acestea trebuie să o facă în conformitate cu defilarea pe care o facem pe site, indicând dacă ne deplasăm în sus sau jos

 .content-wrapper {înălțime: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: centru; -webkit-justify-content: centru; -ms-flex-pack: centru; justify-content: centru; text-align: centru; -webkit-flex-flow: coloană nowrap; -ms-flex-flow: coloană nowrap; flex-flow: coloană nowrap; culoare: #fff; font-family: Montserrat; text-transform: majuscule; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transform: translateY (40vh); will-change: transforma; -webkit-backface-visible: ascuns; backface-vizibilitate: ascuns; -webkit-tranziție: toate 1,7s cub-bezier (0,22, 0,44, 0, 1); tranziție: toate 1,7s cub-bezier (0,22, 0,44, 0, 1); } .content-title {font-size: 12vh; înălțimea liniei: 1,4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transformare: 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); }

Cod JavaScript

În cele din urmă în JavaScript ne vom ocupa de ceea ce sunt ascultător evenimentelor noastre, adică să știm când utilizatorul folosește mouse-ul pentru a derula pagina web. În plus, vom detecta browserul folosit și vom stabili câteva valori constante, cum ar fi durata pe care trebuie să o aibă un glisor înainte ca acesta să poată fi modificat din nou, sensibilitatea derulării și numărul de pagini pe care le vom avea.

 var timp = fals; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); sensibilitate var Defilare = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". background"). length; function parallaxeffect (evt) {if (esFirefox) {delta = evt.detail * (-120); } else if (esInternetE) {delta = -evt.deltaY; } else {delta = evt.wheelDelta; } if (time! = true) {if (delta = ScrollSensitivity) {time = true; if (currentSlider! == 0) {currentSlider--; } previousItem (); durationSliderTime (durationSliders); }}}

În cele din urmă, vom stabili ora la care trebuie fixată imaginea pentru a merge la următoarea, precum și ascultătorii la evenimentele noastre, în plus vom folosi funcția de adăugare sau eliminare a clasei pentru a ști când este una dintre imagini în partea de jos sau de sus:

 function timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = este Firefox? "DOMMouseScroll": "roată"; window.addEventListener (eveniment ScrollMouse, _.throttle (efect Parallax, 60), fals); funcția eleNext () {var $ slidePrevious = $ (". background"). eq (currentSlider - 1); $ slideAnterior.removeClass ("sus-defilare"). addClass ("jos-defilare"); } function previousItem () {var $ slideSig = $ (". background"). eq (currentSlider); $ slideSig.removeClass ("down-scroll"). addClass ("up-scroll"); }

Odată terminat codul, nu trebuie decât să testăm funcționarea aplicației noastre, pentru aceasta trebuie doar să folosim derularea mouse-ului pentru a vedea comportamentul, să vedem:

Acest efect oferă o senzație destul de proaspătă site-urilor noastre, cu toate acestea este recomandabil să îl utilizați în anumite aplicații, cum ar fi portofolii sau pagini de informații, deoarece orice alt site web care gestionează alte tipuri de procese sau informații va obosi utilizatorul și își va pierde interesul pentru acesta .