Background e introduzione
Se stai navigando in qualsiasi sito Web moderno su computer o telefoni cellulari, potresti aver riscontrato che quando scorri verso il basso / verso l'alto il sito Web, sembra che l'intero schermo si muova nella direzione dello scorrimento. Se questo è l'effetto sullo sfondo, anche le informazioni in primo piano cambiano durante lo scorrimento. Questo effetto può essere brevemente descritto come scorrimento parallasse.
Scorrimento
Cerchiamo di capire cosa significa scorrere. Quando si visualizza una pagina Web, l'azione per sfogliare la pagina Web in qualsiasi direzione (su, giù, sinistra e destra) è nota come Scorrimento.
Di solito, se sei un utente di computer desktop, questa azione viene eseguita utilizzando la rotella di scorrimento del mouse.
Storia
Guardiamo la parola: scorrere. In tempi antichi, per inviare un messaggio ad altre persone che si trovano a grande distanza, venivano usati rotoli scritti a mano. Questi rotoli sembravano come mostrato di seguito:
Immagina l'azione della persona che tiene in mano il rotolo. Per leggere il contenuto per intero, la persona dovrebbe "scorrere" e rotolare ulteriormente. L'uso di questi rotoli era anche per conservare un testo o delle decisioni. Con il passare del tempo, l'uso del rotolo è aumentato poiché è stato preparato con diversi materiali di scrittura come: papiro, pergamena e carta.
Con l'evoluzione dei computer, è diventato possibile elaborare e archiviare documenti, tabelle e immagini di grandi dimensioni. A volte i dati erano così tanto che le dimensioni dello schermo non erano sufficienti per presentare i dati all'utente. Quando i dati da visualizzare erano più grandi della dimensione della finestra o dell'area di visualizzazione, i dati sarebbero rimasti nascosti. Ciò ha reso necessario un approccio per espandere l'area dello schermo.
Di seguito sono elencate alcune opzioni per ottenere l'espansione dello schermo:
- Per aumentare le dimensioni dello schermo
- Per ridurre la dimensione dei dati
- Per utilizzare lo scorrimento
Questo meccanismo di scorrimento è più importante per le persone che lavorano con la progettazione grafica e il fotoritocco.
Parallax Scrolling Origin
Esaminiamo la storia dello scorrimento parallasse. Per prima cosa, capiremo cosa significa la parola parallasse. La parola parallasse deriva dalla parola grecaπαράλλαξις (parallassi), che significa alternanza.
Se stiamo guardando un oggetto da un angolo, l'oggetto apparirà in un modo specifico. Ma se stai spostando lo stesso oggetto da posizioni diverse, ci sarà un apparente movimento di oggetti. Questo fenomeno è denominato Parallax.
Ora che abbiamo compreso l'origine e il background di Parallax, comprendiamo la storia e il concetto di Parallax scrolling nel web design.
Definizione
Secondo Wikipedia - Parallax scrolling è una tecnica di computer grafica in cui le immagini di sfondo si muovono oltre la telecamera più lentamente delle immagini in primo piano, creando un'illusione di profondità in una scena 2D e aggiungendo al senso di immersione nell'esperienza virtuale.
Lo scorrimento parallasse è stato impiegato nei primi giorni di animazione. Molti degli studi di animazione (come Disney) hanno utilizzato telecamere multiplano per ottenere l'effetto di parallasse.
Con l'evoluzione delle tecnologie di computer grafica e dei framework all'avanguardia come JavaScript, i web designer e gli sviluppatori possono ora creare siti con una ricca esperienza. Sebbene lo scorrimento parallasse sia iniziato con un paio di livelli, è stato portato al livello successivo con le barre di scorrimento nei computer. La tecnica è rimasta la stessa, ma grazie alla sua applicazione per lo scorrimento, è stata creata un'esperienza unica.
Esempi
Lo scorrimento della parallasse è ampiamente utilizzato nei siti web moderni. Poiché lo scorrimento parallasse può essere implementato per cellulari e siti desktop in una volta sola, la popolarità di tali siti è aumentata alle stelle negli ultimi anni.
Di seguito sono riportati alcuni esempi di siti Web che utilizzano lo scorrimento parallasse:
Bear Grylls
Man mano che l'animazione procede, sarai in grado di vedere come il contenuto del sito web sta diventando interattivo. Mentre scorri in avanti, verranno rivelate sempre più informazioni.
Rendi importanti i tuoi soldi
Per presentare al lettore i vantaggi di un'unione di credito, questo sito ti guida attraverso una trama. Mentre scorri in avanti, le informazioni vengono rivelate in un modo unico.
Infografica InfoQuest
Il viaggio di un dipendente per trovare informazioni critiche sul suo posto di lavoro viene rappresentato utilizzando l'esperienza di scorrimento.
GitHub 404
Questo è un po 'diverso dalla solita esperienza di parallasse, l'oggetto nella parte superiore dello schermo si muove mentre passi il puntatore del mouse su di esso.
Applicazioni di Parallax Scrolling
A questo punto, dovrebbe essere chiaro dalla definizione e dallo sfondo che lo scorrimento della parallasse è utile in un'ampia varietà di media digitali. Alcune delle applicazioni di scorrimento parallasse sono di seguito:
Game Design
Lo scorrimento parallasse è ampiamente utilizzato nella progettazione di giochi. Il personaggio deve muoversi rispetto allo sfondo e con il controllo del giocatore tramite mouse e tastiera, l'intera esperienza deve cambiare. Il game design è un modo molto primitivo ma alla moda di usare lo scorrimento parallasse.
Siti web
Per coinvolgere l'utente nel sito Web, è importante un'esperienza dinamica e diversa. Come avrai notato dagli esempi di siti web discussi sopra, lo scorrimento parallasse si aggiunge al contenuto a causa della sua rappresentazione in modo interattivo.
Questo capitolo parla dei concetti di web design e dei vantaggi dell'utilizzo dello scorrimento parallasse nel web design.
Sfondo di web design
Dall'inizio del 20 ° secolo, i media cartacei sono entrati in una competizione spietata a causa dei media digitali. I media digitali includono ciò che vediamo su Internet e quindi le riviste alleate che arrivano.
Le newsletter che ricevi come parte degli abbonamenti settimanali / mensili sono incluse anche nei media digitali. In primo luogo, i media digitali dipendono fortemente dai dispositivi mobili e desktop. Fa la differenza quando puoi vedere i contenuti sul tuo cellulare (palmare) e sui dispositivi desktop. Il modo in cui il contenuto viene visualizzato su uno dei dispositivi, è in gioco uno stile specifico di progettazione del contenuto.
Questo stile di progettazione è indicato come Web Designing. Dal punto di vista della progettazione o della codifica, quando un progettista di pagine web si propone di costruire una pagina web, prende in considerazione anche i dispositivi mobili.
Secondo Wikipedia, Web design comprende molte competenze e discipline diverse nella produzione e manutenzione di siti web. Una di queste abilità è progettare un'esperienza di impatto per gli utenti. Il web design soddisfa questa esperienza e fornisce un modo organizzato per organizzare i contenuti della pagina e fornisce loro uno stile diverso.
Il web design include: progettazione dell'interfaccia, progettazione grafica e utilizzo di determinati standard per scrivere il codice. Questo lavoro può essere svolto da una sola persona o da un team di persone.
Ci sono molti strumenti disponibili sul mercato per rendere questo lavoro facile, tuttavia, spetta alle proprie capacità creative creare l'aspetto della pagina web.
Web design moderno
Con l'evoluzione della tecnologia, c'è un'esplosione di conoscenza. Internet è diventata una cosa e ha fatto salire alle stelle la qualità delle nostre vite. In un dato momento, sempre più informazioni vengono elaborate da un utente Internet medio. Queste informazioni possono essere sotto forma di un sito Web su un computer desktop o da un dispositivo palmare; tablet o un telefono cellulare.
Sebbene così tante informazioni cerchino di attirare l'attenzione dell'utente, è ovvio che come persona che progetta un'esperienza web, there are only 3 seconds allocated to pass the message across.
Come si affronta questo? È più che importante trasmettere il messaggio, perché è alla fonte di qualsiasi web design. Vuoi costruire un sito web che comunichi, allo stesso tempo deve attrarre e far aderire l'utente al contenuto. È davvero un compito difficile.
Considerando l'ampio ambito di lavoro per qualsiasi contenuto web, sempre più persone stanno entrando nel mondo del web design. Un web designer creativo è il discorso della città grazie al suo straordinario talento nel creare una buona esperienza utente. Il web designer può attualmente accettare un lavoro presso una società di marketing / pubblicità o iniziare da solo a immergersi nel web design.
Aesthetic appeal is the key for a given content on web. Ciò significa che un web designer deve essere consapevole dei principi e delle fondamenta di design, colore, spaziatura, ecc. Sempre più utenti vedono ogni giorno contenuti web di grande qualità. È ovvio che si confronterà la pagina Web o il sito Web corrente con quello che è stato visitato poche ore o pochi minuti fa. L'ordinamento del contenuto, insieme a una buona grafica e colori, ha reso molti banner / pagine indipendenti una cosa popolare su Internet.
Esempio
Prendiamo il caso di un grafico semplice. Ci sono molti grafici su Internet, chiamati meme. Sono sempliciGraphics Interchange Format (GIF)immagini con del testo incorporato nella grafica. Questi meme stanno facendo il giro di Internet sulla base di un recente evento in qualche parte del mondo. Se guardiamo questo esempio, l'unico fascino che hanno è la grafica e un testo pertinente o irrilevante.
Tuttavia, ha guadagnato così tanta popolarità che fa pensare a incredibili possibilità su Internet.
Pertanto, affinché un web design sia efficace, sia la creatività che il metodo per comunicare il messaggio giocano un ruolo importante.
It is important point to note that a successful web page is combination of Web Design and Web Development. Secondo l'attuale tendenza del mercato, insieme al web designer, uno sviluppatore web è un must nel team. Un web designer cercherà sempre ispirazione e utilizzerà la sua creatività per creare grafica e combinazioni di colori pertinenti. Considerando che uno sviluppatore web utilizzerà le sue capacità di codifica per portare la grafica e le combinazioni di colori dal vivo sul sito web.
Un web designer dovrebbe anche avere una conoscenza della scrittura del codice, per rendere la grafica o lo schema di colori previsto utilizzabile per uno sviluppatore web. Un semplice codice in una semplice applicazione come Blocco note può aiutare un web designer a prendere il posto di guida nello sviluppo web.
Utilizzo dello scorrimento parallasse
Parallax Scrolling rientra nei confini di lavoro sia del web designer che dello sviluppatore web. Un web designer potrebbe creare l'effetto di Parallax Scrolling utilizzando strumenti come InVision, UXPin per trasmettere allo sviluppatore web il comportamento previsto sullo scorrimento. Inoltre, uno sviluppatore web si baserà sulle sue capacità per creare l'effetto di scorrimento parallasse. Questo può essere fatto con diverse tecniche JavaScript, CSS e jQuery. Una descrizione dettagliata di ciascuno di questi metodi è fornita nei capitoli successivi.
Secondo la definizione specificata nella sezione precedente, parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
Una semplice tecnica CSS per creare un effetto di scorrimento parallasse è mostrata su questo sito Web: The Urban Walks .
Come puoi vedere nello screenshot qui sopra, il telefono cellulare al centro dello schermo cambierà il contenuto dopo aver fatto scorrere due volte. Inoltre, osserva al primo scorrimento, lo sfondo con il telefono cellulare cambierà.
Questa transizione ti dà la sensazione che il telefono sia costante al suo posto e che lo sfondo venga modificato mentre scorri verso il basso. Questo effetto è chiamato effetto di scorrimento parallasse. Sai che lo stai scorrendo verso il basso poiché c'è un indicatore degli schermi verso l'estrema destra dello schermo sotto forma di alcuni punti.
Il primo utilizzo dello scorrimento parallasse è stato nei vecchi giochi per computer. Dove un'immagine di sfondo fissa si spostava a una velocità più lenta quando il personaggio si muoveva più velocemente dello sfondo. Alcuni esempi di questi giochi: Disney's Aladdin e Disney's Lion King. Questi giochi sono stati lanciati rispettivamente nel 1993 e nel 1994.
Anche se è vero che è iniziato con i giochi, ma attualmente molti web designer stanno sottolineando l'effetto di far sì che il loro pubblico ami il loro sito. I vantaggi dello scorrimento parallasse sono estesi dal sito Web ai siti mobili.
Questi siti Web, una volta progettati con lo scorrimento parallasse per le versioni desktop, vengono aggiunti con codice che supporta anche gli schermi mobili.
Vantaggi dello scorrimento parallasse nel Web e nei dispositivi mobili
In questa sezione, discuteremo i vantaggi dell'utilizzo dello scorrimento parallasse da varie prospettive come discusso di seguito:
Dal punto di vista del pubblico
C'è un elemento divertente associato allo scorrimento della parallasse. Come hai visto nell'esempio sopra, trasmettere le informazioni di migliaia di parole è diventato più facile poiché l'utente scorre da schermate diverse.
Se consideriamo un utente per la prima volta, c'è una curiosità associata ad ogni scorrimento. Quindi, non solo arricchisce l'esperienza del sito web, ma aumenta anche la probabilità che l'utente trascorra più tempo nella prima visita al sito stesso.
La percentuale di coinvolgimento dell'utente aumenta drasticamente man mano che l'utente è incuriosito dallo scorrimento.
L'utente non deve pensare al processo di elaborazione delle informazioni, poiché sono disponibili in modo più ovvio.
In alcuni casi, puoi inserire una storia sul prodotto / servizio che offri animando altri elementi sullo schermo, come il logo o l'icona del menu.
Dal punto di vista tecnico
Una volta implementato lo scorrimento della parallasse per una versione desktop, molto facilmente lo stesso framework può essere utilizzato per il sito Web mobile o gli schermi.
Poiché lo snippet di codice è semplice e riutilizzabile, se sei un'agenzia di marketing o una società di servizi di siti Web, questo diventa facile quando si raccolgono nuovi clienti.
La conoscenza dello scorrimento della parallasse viene fornita con una maggiore esperienza nei framework di frontend come CSS, JavaScript, ecc.
Per uno sviluppatore web, quando si tratta di creare un effetto di scorrimento parallasse, sono disponibili varie tecniche. Una di queste tecniche sta usandoCascaded Styling Sheets(CSS).
CSS spiega come vengono visualizzati gli elementi HTML sullo schermo. Si può creare un file CSS e può essere utilizzato per il sito web completo. È più semplice aggiungere file CSS che aggiungere stili a ogni elemento HTML e gestirli in parti diverse della pagina web.
Note- Alcuni dei metodi discussi di seguito in questo capitolo sono specifici per i computer desktop e non per i dispositivi mobili. Sarà menzionato nei passaggi quando una particolare tecnica non è adatta per i dispositivi mobili.
Considerando gli scarichi CSS in tutto il disegno extra nel DOM (Document Object Model), c'è un maggiore utilizzo dell'accelerazione hardware e un effetto fluido senza appesantire la CPU.
Metodo della posizione assoluta
Questo metodo viene spesso utilizzato per creare un effetto di parallasse, poiché è relativamente leggero rispetto ad altre opzioni disponibili. La posizione dell'immagine di sfondo viene mantenuta fissa rispetto ad altri contenuti sullo schermo. Nell'esempio discusso di seguito, vedrai come farlo usando la magia dei CSS.
In questa sezione, esamineremo due metodi per il metodo della posizione assoluta:
- Sfondo singolo
- Sfondo multiplo
Metodo in background singolo
In questo metodo, creeremo due file nella stessa cartella. Osservare i passaggi indicati di seguito per lo stesso scopo:
Step 1
Dobbiamo creare due file nella stessa cartella: il primo file con markup HTML e il secondo con codice CSS.
Step 2
Ora, definiamo il nostro markup HTML. Rispettare il codice riportato di seguito -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Apri il blocco note. Copia e incolla lo snippet di codice sopra.
Quando salvi il file, sotto Save as type, Selezionare All Files. Immettere un nome per il file come richiesto, ma deve essere seguito da un'estensione -.html come mostrato nello screenshot qui sotto.
Step 4
Una volta salvato il file, crea un altro file nel blocco note e incolla il codice indicato di seguito -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Come hai visto nell'ultimo passaggio, quando salvi il file, sotto Save as digitare, selezionare All Files. Immettere un nome al file come richiesto e aggiungere un'estensione.css ad esso.
Analisi del codice
Cerchiamo di capire quale parte del codice è responsabile dell'effetto di parallasse. Il lavoro più importante per la parallasse viene svolto utilizzando la prospettiva e le regole di trasformazione. Fare riferimento aline 15nello snippet di codice sopra. La prospettiva è creata per il nostroBgContainerprimo. Questo avvia una piattaforma per la regola di trasformazione.
Nel Parallax container che parte dalla linea 40, transform la regola sulla riga 48 spinge il div BgContainer in background usando translate (-1px).
È possibile modificare i valori per i parametri di traslazione e scala per modificare la profondità della parallasse.
Quando apri il file html, l'effetto di parallasse sarà visibile come mostrato di seguito -
Note - Per il resto del tutorial, si presumerà che il lettore sia in grado di creare i file HTML e CSS secondo la struttura delle cartelle fornita nel metodo sopra.
Metodo di sfondo multiplo
In questo metodo, avremo immagini diverse che si incontrano mentre l'utente scorre la pagina. C'è un'immagine con le matite, che viene utilizzata in diverse combinazioni di colori per illustrare questo effetto.
Osserva il seguente codice per la pagina HTML come mostrato di seguito:
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Simile all'esempio precedente, useremo styles.cssarchiviato nella stessa posizione di questo file HTML. Abbiamo tre diversi div denominati Primo, Secondo, Terzo e Quarto.
Di seguito viene fornito il codice CSS per lo scorrimento parallasse:
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Qui creiamo l'effetto di parallasse dalla riga 7, la proprietà importante qui è background-attachment:fixed.
Utilizzando questa proprietà, la prima immagine con le matite colorate rimarrà sempre in alto. Mentre scorri verso il basso, inizieranno a essere visualizzate immagini diverse come descritto dalla riga 28.
Di conseguenza, sarai in grado di vedere l'effetto di parallasse come mostrato nella gif di seguito. L'immagine seguente è lo screenshot dell'esempio che abbiamo considerato per più sfondi.
Puro parallasse CSS
Combiniamo la conoscenza dei due metodi precedenti e creiamo un effetto Parallax Pure CSS avanzato.
La differenza sarà il modo in cui organizziamo il file image elemento e il z-transformproprietà. La spiegazione della proprietà verrà fornita dopo il codice CSS.
Crea il file HTML con il codice seguente usando il solito metodo da Blocco note.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>Per il file CSS, il codice è fornito di seguito:
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Analisi del codice
Abbiamo corretto la posizione del primo strato in line 26 usando position:absoluteproprietà. Le posizioni sono anche hardcoded su 0.
In parallax_two, che è il livello con il titolo, che abbiamo applicato z-index: 10per fornire un effetto fluttuante all'intestazione. Lo stratoparallax_three viene spostato in basso fornendo una proprietà margin-top.
Quindi, possiamo aumentare il livello di complessità nel nostro effetto Parallax.
Osservare l'effetto come mostrato nella figura sotto.
Per creare l'effetto Parallax, il metodo più popolare utilizza JavaScript. Da questo capitolo in poi discuteremo i concetti di JavaScript e alcune delle librerie utilizzate per ottenere lo scorrimento Parallax.
L'utilizzo di JavaScript puro ha senso per mantenere ottimali le prestazioni del sito web. Ci sono molti altri vantaggi nell'usare le librerie da un aspetto delle prestazioni. Tuttavia, per comprendere meglio l'organizzazione del codice, inizieremo con l'implementazione della parallasse JavaScript pura. Fatto divertente, a volte viene anche chiamato JavaScript purovanilla JavaScript.
Parallax Scrolling utilizzando Pure JavaScript
Innanzitutto, crea il file HTML principale con il codice mostrato di seguito. La pagina HTML sarà composta solo da quattro titoli di testo.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>Osserva che nella riga numero 4, per questo esempio, stiamo usando myscripts.js file che verrà archiviato nella stessa cartella del file HTML e del file CSS.
Ora, prepariamo il nostro file CSS come mostrato di seguito.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}Ora arriva la parte JavaScript, crea un file nel blocco note e salvalo come myscripts.js .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});Analisi del codice
Analizziamo il codice JavaScript.
Codice da line number 1 to 4 rappresenta la funzione di supporto.
Nella riga 6, selezioniamo il nostro elemento di parallasse e aggiungiamo scrollevento alla finestra. Per determinare quanta area viene fatta scorrere, stiamo usandoscrolledHeightproprietà. Mentre lo schermo scorre verso il basso,backgroundPositionY viene aggiornato per l'elemento di parallasse.
Per rallentare l'effetto di parallasse, abbiamo diviso per 1,5, questo numero può essere modificato in qualsiasi numero desideri.
Ora sarai in grado di vedere la pagina scorrere verso il basso come previsto nello screenshot sottostante.
Utilizzo della libreria JavaScript ScrollMagic
Come discusso nella sezione precedente, mentre possiamo usare JavaScript puro per creare un effetto di parallasse, ci sono alcune potenti librerie JavaScript che miglioreranno l'esperienza dell'utente. ScrollMagic è una di queste librerie per la creazione di interazioni di scorrimento con parallasse.
Discutiamo di più su questo con l'aiuto di un esempio come dato di seguito:
Note- In questo esempio, per mantenerlo semplice, avremo il CSS memorizzato nel file HTML. Inoltre, il codice JavaScript sarà presente nello stesso documento. In poche parole, creeremo un solo file HTML e avrà le librerie ScrollMagic referenziate insieme al CSS richiesto.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>Come mostrato nel codice precedente, abbiamo richiesto riferimenti alle librerie JavaScript da line 3 to 6. Il codice CSS è specificato dalla riga 9 alla 19.
Rete di distribuzione dei contenuti
I riferimenti agli script dalla riga 3 alla 6 puntano agli URL ScrollMagic Content Delivery Network (CDN). L'utilizzo di una CDN ha senso nello sviluppo di siti Web moderni, poiché puoi caricare le librerie richieste senza rallentare il tuo sito Web.
Se sono necessarie personalizzazioni nelle librerie, è necessario ospitare le librerie sui rispettivi server per utilizzare questi effetti. Se stai utilizzando le funzionalità di base di una libreria, è efficiente utilizzare l'URL CDN.
Il codice HTML sopra mostra un'immagine separata da 2 divisioni. La prima divisione appare con un'intestazione -These are bricks e la seconda divisione appare con - Some More Bricks.
Si noti che nel codice CSS dalla riga 9 alla 19, stiamo specificando solo la posizione e lo stile per il rispettivo div di parallasse.
Il lavoro per creare questo morbido parallasse sceneè fatto dalla libreria ScrollMagic. Se fai riferimento al codice dello script dalla riga 43 alla 62, ScrollMagiccontroller viene invocato e un file scene è creato.
Le scene guidano il DOM per creare un effetto di parallasse quando l'80% dello schermo è occupato. JavaScript viene utilizzato per comprendere il trigger di scorrimento. Di conseguenza, ciò che ottieni è un'esperienza fluttuante su questa pagina.
Note - Considerando l'immagine sopra come un'immagine GIF, non potrai osservare l'effetto uniforme delle divisioni del testo.
Attiva animazioni
Le possibilità di creare un'esperienza utente varia sono infinite con ScrollMagic Library. Osserva gli snippet di codice riportati di seguito per attivare le animazioni durante lo scorrimento.
Nota che per questo hai bisogno di due file * meno; un file HTML e un file CSS.
Crea file HTML con il codice mostrato di seguito -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>Ora, crea un file CSS con il seguente codice al suo interno.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}Analisi del codice
Facendo riferimento al codice HTML, il codice ScrollMagic inizia da line 17 e continua fino a line 25. In questa sezione, creeremo due scene ScrollMagic. La prima scena è per l'immagine del mattone e l'altra è per l'animazione del banner.
Come specificato in setTween funzione attiva line 20, quando l'azione di scorrimento avviene al 40% delle dimensioni dello schermo, inizia la scena successiva che mostra il banner Questo è tutto!
L'opacità del div con id - square è controllato nel file CSS su line 10 e line 15.
Di conseguenza, vedrai l'animazione di seguito nella pagina.
Scorrimento orizzontale
Possiamo anche applicare lo scorrimento della parallasse e ottenere uno scorrimento orizzontale. La libreria ScrollMagic può essere utilizzata per creare un effetto di scorrimento orizzontale. Vedi il codice qui sotto.
Sebbene il codice sia diretto per creare un effetto di scorrimento orizzontale, avremo bisogno del riferimento jquery per ottenere il movimento orizzontale degli schermi. I dettagli di jQuery sono forniti nel prossimo capitolo, per ora basta seguire il codice come indicato di seguito.
Creeremo tre file separati: file HTML per il codice principale, file CSS per gli stili e file JS per le chiamate di funzione ScrollMagic.
Ecco il codice per il documento HTML.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>Osserva che abbiamo tre sezioni, che appariranno dopo lo scorrimento. Le tre sezioni sono denotate dagli id titolo1, titolo2 e titolo3 rispettivamente alle righe 15, 19 e 23.
Il codice per il documento CSS è fornito di seguito:
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}Analisi del codice
I colori di sfondo per le tre schermate (o sezioni) vengono forniti lines 10, 22 e 25.
Stiamo calcolando la larghezza relativa di ogni schermata nel codice a partire da line 13.
Il codice JavaScript per ScrollMagic è fornito di seguito:
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});Notare il triggerHookproprietà sulla riga 8. Questa proprietà è responsabile di fornire l'effetto di scorrimento quando l'utente raggiunge il completamento dell'evento di scorrimento. La funzioneTimelineMax è responsabile di fornire l'effetto di scorrimento orizzontale ai nostri schermi.
Una volta creati i rispettivi file, sarai in grado di vedere l'animazione di scorrimento orizzontale come mostrato di seguito.
Nei capitoli precedenti, abbiamo capito come i buoni effetti che utilizzano le librerie JavaScript aggiungono al sito web. JavaScript, se abbinato a Photoshop, offre flessibilità e facilità fenomenali per aggiungere lo scorrimento parallasse al tuo sito web.
In questo capitolo, esamineremo tre plugin di Photoshop per aggiungere l'effetto di scorrimento parallasse. Proprio come come abbiamo fatto riferimento nel capitolo precedente per JavaScript, useremo i riferimenti di Photoshop nel nostro codice HTML per creare un potente scorrimento parallasse di Photoshop.
Un punto importante da notare sui plug-in di Photoshop è che spesso i plug-in non vengono aggiornati, quindi dovresti fare qualche ricerca prima di iniziare a utilizzare qualsiasi plug-in per lo scorrimento del parallasse.
Parallax Scrolling utilizzando il semplice Parallax.js
Parallax.js usando il plugin di Photoshop, possiamo creare un effetto di scorrimento parallasse senza troppi problemi. Considerare il plugin jQuery richiede l'inclusione di librerie di fascia alta come bootstrap. Nota che in questo capitolo saranno presenti tag HTML5 nel codice.
Diamo un'occhiata al file HTML mostrato di seguito -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>Codice di analisi
Gli snippet di codice sopra mostrano il codice di una pagina con due immagini e un testo di esempio tra di loro.
Come puoi vedere, il codice inizia con <!DOCTYPE html>Questo è il modo tipico per far sapere ai browser che il codice è basato su HTML5.
il <meta> tag da line 4 to 6mostra il codice che è macchina per l'interpretazione. Non sarai in grado di vedere l'impatto di questo codice. La cosa importante da notare qui è - conmeta tag, gli sviluppatori web ottengono un maggiore controllo sui dati visualizzati.
Inoltre, su line 8 and 9, Abbiamo incluso i fogli di stile CSS insieme a Bootstrap. Per un carattere e una tipografia specifici, Bootstrap è la libreria ampiamente utilizzata.
Lines 10 and 11prenditi cura delle librerie Photoshop e Parallax.js. È importante includere il controllo su Parallax.js per avere l'effetto delle immagini di parallasse. Sarai in grado di trovaredata-parallax proprietà con div sopra line 21, Che è sufficiente per chiamare la libreria parallax.js per l'effetto di parallasse richiesto.
L'effetto di parallasse può essere visto nel codice attivo lines 21 e line 40. Le proprietà importanti che rendono possibile questo effetto con parallax.js sono:data-parallax, data-image-src, data-natural-width, data-natural-height.
Con il file CSS, dobbiamo fornire solo una proprietà. È come mostrato di seguito -
.parallax-container {
height: 500px;
width: 100%;
}Nel codice HTML sopra, abbiamo creato una struttura specifica per i file CSS. Avremo una cartella chiamatacss, che avrà file CSS - bootstrap.min.css e style.css.
Una volta che tutto è finito con i documenti, sarai in grado di vedere l'effetto di parallasse come mostrato di seguito:
Parallaxator utilizzando Photoshop Plugin
Parallaxator, il migliore dei plugin di Photoshop, fornisce effetti di scorrimento parallasse ed è facile da usare. Puoi scaricare il plugin Parallaxator, i suoi file CSS e JS da questo link - Parallaxator GitHub .
Una volta scaricati i file CSS e JS, è possibile utilizzare il codice mostrato di seguito per creare il codice HTML.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>Codice di analisi
L'effetto di parallasse è fornito dalla classe parallax_child fornita con ogni tag img. Il parallax_child è collegato con i file CSS e JS forniti di seguito.
Affinché il parallaxator funzioni il plugin, abbiamo incluso fm.parallaxator.jquery.css e fm.parallaxator.jquery.js. Questi file devono essere disponibili nella stessa directory del file HTML.
Il codice per CSS è come mostrato di seguito:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}Come risultato del codice precedente, sarai in grado di vedere l'effetto di parallasse.
Plugin jQuery Stellar.js per lo scorrimento parallasse
Stellar.js è un'altra aggiunta all'elenco dei plugin di Photoshop per parallasse. Sebbene non sia più mantenuto, gli sviluppatori che hanno utilizzato la sua build stabile, sono in grado di utilizzare facilmente l'effetto di scorrimento parallasse. È compatibile con le ultime versioni di Photoshop e facile da implementare.
Dovrai scaricare l'ultimo jquery.stellar.js dal sito Web ufficiale per il plug-in Stellar.js . Una volta scaricato, crea questo file plugin nella stessa cartella dei tuoi file HTML e CSS.
Diamo uno sguardo al codice HTML.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>Codice di analisi
Affinché Stellar.js funzioni, abbiamo incluso la libreria subito dopo aver fatto riferimento al plug-in di Photoshop su jquery.stellar.js line 6.
Le funzioni per la parallasse stellare sono chiamate nel tag script da line 8 to line 15. Con la proprietàdata-stellar-background-ratio, Stiamo impostando un offset per le immagini visualizzate. Questo viene fattolines 19,20,21 and 22.
Il codice CSS è fornito di seguito:
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}Una volta che entrambi i file sono stati creati e stellar.js il file del plugin è incluso nella stessa cartella, dovresti essere in grado di vedere l'effetto come mostrato nello screenshot qui sotto -
Bootstrap è un framework popolare con molti componenti pronti per l'uso tra cui scegliere. Bootstrap può ottimizzare il codice per l'implementazione dello scorrimento parallasse.
In questo capitolo, con un esempio Parliamo di come utilizzeremo il componente Jumbotron per implementare lo scorrimento della parallasse.
Pagina intera con Parallax Bootstrap4 Jumbotron
Immagina un sito web in cui all'utente viene mostrato un grande riquadro di "invito all'azione" con alcuni contenuti riguardanti uno sconto o una vendita. Di solito, Jumbotron trova la sua applicazione in tali luoghi. È una grande scatola utile per attirare l'attenzione dell'utente.
Poiché stiamo utilizzando solo un componente del Bootstrap, non creeremo un file CSS separato per questo esempio. Immergiamoci direttamente nel codice HTML.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Codice di analisi
il line 64 riferimenti alla libreria Bootstrap. Stiamo specificando il margine e il raggio del bordo per Jumbotron daline 8 to 11.
Come possiamo vedere su line 33, Stiamo creando un div con la classe Jumbotron per mostrare la grande scatola in cui avremo caricata la nostra immagine specifica. Tieni presente che questa volta non esiste un URL diretto per l'immagine, utilizzeremo l'immagine scaricata. Puoi scaricare qualsiasi immagine ad alta risoluzione per il tuo esempio e specificarla inline 16.
L'output che puoi vedere quando esegui il codice sopra indicato è mostrato di seguito -
In questo tutorial, abbiamo studiato diverse librerie per la creazione dello scorrimento parallasse. Abbiamo coperto tutti gli aspetti dal livello base al livello avanzato in cui abbiamo utilizzato CSS Bootstrap dove abbiamo utilizzato per lo sviluppo front-end. Ti suggeriamo di applicare le tue capacità creative per creare una pagina web difficile da ignorare. Ricorda che per lo scorrimento parallasse, ci sono enormi esempi online per darti un'ispirazione.
Utilizzo dello scorrimento parallasse
Come abbiamo già discusso nei capitoli introduttivi, puoi utilizzare lo scorrimento parallasse per ottenere un'esperienza utente straordinaria. Ecco alcune idee per il sito, dove puoi includere lo scorrimento parallasse.
Cronologia del sito web
Questi tipi di siti di solito hanno una storia da raccontare su un prodotto o un'azienda o qualsiasi altra cosa. Puoi creare un effetto di parallasse per presentare la storia al visitatore e tenerlo coinvolto con diverse animazioni.
Per un sito con timeline, varrà la pena creare uno sfondo e mostrare il contenuto del testo in primo piano. Puoi collaborare con un grafico per creare grafiche che vadano di pari passo con lo sfondo.
Sito web dell'app per dispositivi mobili
Al giorno d'oggi, l'app mobile è un must per qualsiasi offerta di prodotti / servizi. Ci sono molte startup che cercano di creare un sito Web per app mobili che forniscano una spiegazione di ciò che l'app mobile può e non può fare.
L'App Store di Apple, noto per le sue linee guida rigorose per la creazione di app, richiede che l'app mobile abbia un sito Web di supporto. Questo sito web dovrà sempre essere attraente e facile da usare.
Utilizzando lo scorrimento parallasse, puoi utilizzare un'immagine mobile e mostrare diversi tipi di funzionalità mentre l'utente scorre la pagina. Uno di questi esempi è già stato discusso nel Capitolo 4 di questo tutorial.
Effetti al passaggio del mouse
Puoi usare la potenza dello scorrimento parallasse e passare il mouse per creare un livello di animazione successivo. Con il mouse sopra, puoi controllare la direzione di scorrimento e creare un effetto di parallasse.
In questo modo, ci sono molte possibilità quando si tratta di creare una grande esperienza. Tutto ciò di cui hai bisogno è un'idea e il giusto set di strumenti e librerie.
Futuro dell'interfaccia utente Web
Con il potere della tecnologia e di elementi creativi come lo scorrimento parallasse, c'è una competizione mai vista prima per creare esperienze utente sorprendenti. Questo non è solo limitato ai siti Web, ma è stato esteso anche ai siti mobili.
Sebbene l'interfaccia utente Web sia attualmente al suo apice, avere una pagina Web compatibile con un dispositivo mobile è la necessità di tempo. Come abbiamo visto negli esempi per Bootstrap e jQuery, il sito non può vivere a lungo se non sono supportati sui dispositivi palmari.
Insieme alle biblioteche esistenti, il futuro dell'esperienza utente attende con impazienza anche l'Intelligenza Artificiale e la realtà virtuale. Alcune pagine web possono essere visualizzate utilizzando un dispositivo VR. In una situazione del genere, restare in contatto con gli ultimi plugin e anche cercare di crearne uno nuovo ha davvero senso.
Applichi le conoscenze acquisite in questo tutorial per creare la migliore esperienza utente, ti auguro molta fortuna e successo per il tuo viaggio di sviluppo web!