Tecniche CSS
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 un 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 stai salvando 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 presume che il lettore sia in grado di creare i file HTML e CSS secondo la struttura delle cartelle fornita nel metodo sopra.
Metodo in background 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.
Il codice CSS per lo scorrimento della parallasse è fornito di seguito:
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.
