Sommario
Attualmente disponiamo di un'ampia varietà di pagine web, che possono implementare diversi modelli di design, che possono variare da un classico design piatto o l'innovativo nuovo Material Design.
Ma c'è un modo del tutto diverso e peculiare di fare siti web, siti web che sono meramente informativi e non hanno una funzionalità molto complessa in quanto tale. Per questi casi possiamo utilizzare un sito Web a pagina singola che implementa l'effetto Parallasse.
Questo effetto ci dà la sensazione di avere più piani e persino più pagine in una. Vediamo allora come possiamo implementarlo.
codice HTML
I nostri HTML Sarà composto da una struttura abbastanza semplice, composta da div che identificheremo come contenitori secondo determinate classi, oltre a questo includeremo i nostri fogli di stile nel solito modo, così come i nostri JavaScript. Per questo esempio faremo affidamento su entrambi jQuery Piace Underscore.js che è una libreria che ci fornisce diverse funzionalità che ci aiuteranno con questo esercizio:
Home ParallasseCaduta del cielo
Film 1
Il professionale
Film 2
Le Iene
Film 3
Codice CSS
Per il nostro foglio di stile lavoreremo un po' di più useremo le proprietà di CSS3 riguardo a trasforma per dare l'effetto di spostare su o giù i nostri sfondi, oltre a questo useremo i figli del nostro documento per assegnare diverse immagini di sfondo che serviranno come nostre pagine multiple, vediamo questo frammento del nostro CSS:
.background {dimensione dello sfondo: copertina; background-repeat: no-repeat; posizione di sfondo: centro centro; trabocco: nascosto; volontà-cambiamento: trasformare; -webkit-backface-visibilità: nascosto; visibilità posteriore: nascosta; altezza: 130vh; posizione: fissa; larghezza: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); trasforma: translateY (30vh); -webkit-transition: tutti 1.2s cubic-bezier (0,22, 0,44, 0, 1); transizione: tutti 1.2s cubic-bezier (0,22, 0,44, 0, 1); } .background: prima di {content: ""; posizione: assoluta; larghezza: 100%; altezza: 100%; in alto: 0; sinistra: 0; destra: 0; in basso: 0; colore di sfondo: rgba (0, 0, 0, 0.3); } .background: first-child {background-image: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); trasforma: translateY (-15vh); } .background: first-child .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); trasforma: translateY (15vh); } .background: nth-child (2) {background-image: url (theprofessional.jpg.webp); } .background: nth-child (3) {background-image: url (reservoirdogs.png.webp); } .background: nth-child (1) {z-index: 3; } .background: nth-child (2) {z-index: 2; } .background: nth-child (3) {z-index: 1; }Per finire con il nostro foglio di stile applicheremo alcune modifiche al testo che sarà incluso in ogni contenitore, così come la transizione che ognuno di questi deve fare in base allo scorrimento che facciamo al sito web, indicando se stiamo salendo o giù
.content-wrapper {altezza: 100vh; display: -webkit-box; display: -webkit-flex; mostra: -ms-flexbox; display: flessibile; -webkit-box-pack: centro; -webkit-justify-content: centro; -ms-flex-pack: centro; giustifica-contenuto: centro; allineamento del testo: centro; -webkit-flex-flow: colonna nowrap; -ms-flex-flow: colonna nowrap; flex-flow: colonna nowrap; colore: #fff; famiglia di caratteri: Montserrat; text-transform: maiuscolo; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); trasforma: translateY (40vh); volontà-cambiamento: trasformare; -webkit-backface-visibilità: nascosto; visibilità posteriore: nascosta; -webkit-transition: tutti i 1.7s cubic-bezier (0.22, 0.44, 0, 1); transizione: tutti 1.7s cubic-bezier (0,22, 0,44, 0, 1); } .content-title {font-size: 12vh; altezza della linea: 1.4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); trasforma: translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); trasforma: translateY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); trasforma: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); trasforma: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); trasforma: translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); trasformare: translateY (40vh); } .background.down-scroll + .background: not (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); trasforma: translate3d (0, -15vh, 0); } .background.down-scroll + .background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); trasforma: translateY (15vh); }
Codice JavaScript
Finalmente nel nostro JavaScript ci occuperemo di quali sono ascoltatore dei nostri eventi, ovvero sapere quando l'utente utilizza lo scroll del mouse per scorrere la pagina web. Oltre a questo, rileveremo il browser utilizzato e stabiliremo alcuni valori costanti come la durata che deve avere uno slider prima di poter essere nuovamente modificato, la sensibilità dello scroll e il numero di pagine che avremo.
var tempo = falso; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); sensibilità var Scroll = 30; var durataSlider = 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--; } elemento precedente (); durationSliderTime (durationSliders); }}}Infine, stabiliremo il tempo in cui l'immagine deve essere riparata per passare a quella successiva, così come gli ascoltatori dei nostri eventi, inoltre utilizzeremo la funzione di aggiunta o rimozione di classe per sapere quando una delle immagini è in basso o in alto:
funzione timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = è Firefox? "DOMMouseScroll": "ruota"; window.addEventListener (evento ScrollMouse, _.throttle (effetto Parallasse, 60), false); funzione eleNext() {var $ slidePrevious = $ (". background"). eq (currentSlider - 1); $ slideAnterior.removeClass ("up-scroll") addClass ("down-scroll"); } function previousItem() {var $ slideSig = $ (". background"). eq (currentSlider); $ slideSig.removeClass ("scorri verso il basso") addClass ("scorri verso l'alto"); }Con il nostro codice finito, dobbiamo solo testare il funzionamento della nostra applicazione, per questo dobbiamo solo usare lo scroll del nostro mouse per vedere il comportamento, vediamo:
Questo effetto dà una sensazione abbastanza fresca ai nostri siti, tuttavia è consigliabile utilizzarlo in alcune applicazioni come portafogli o pagine di informazioni, poiché qualsiasi altro sito Web che gestisce altri tipi di processi o informazioni renderà l'utente stanco e perderà interesse in esso . .
