10 frammenti CSS e JavaScript per creare l'effetto di scorrimento della parallasse

C'è molta confusione sul design del parallasse e su come funziona sul web. In generale, il design parallasse utilizza il movimento per creare l'illusione della profondità su una pagina.

Ciò può riguardare modifiche allo sfondo o elementi di posizione semifissi che si spostano insieme allo scorrimento dell'utente. Abbiamo coperto molti esempi da siti Web ma non siamo entrati nel dettaglio delle tecniche coinvolte.

Per questa raccolta, ho scelto i miei frammenti CSS e JavaScript preferiti per la creazione di layout di parallasse. Tutti gli esempi offrono codice sorgente gratuito, quindi puoi giocare con gli snippet e persino usarli nei tuoi progetti.

1. La grande caduta di CJ Gammon

Questo esempio di parallasse è una delle interfacce più uniche che abbia mai trovato. Utilizza uno script personalizzato per creare uno sprite a cascata che sembra scorrere all'infinito lungo la pagina. È stato costruito su elementi canvas controllati tramite JavaScript, quindi è una configurazione piuttosto tecnica.

Per la maggior parte, questa è una testimonianza di ciò che è possibile fare nello sviluppo web moderno. Imparare l'elemento canvas ti dà molto controllo sul tuo design.

Guarda la penna La grande caduta di CJ Gammon

2. CSS Scrolling Parallasse di Sebastian Schepis

Ecco un effetto di parallasse più pratico con uno sfondo fisso e pagine più grandi in alto. Quando scorri, ogni sezione della pagina appare sopra lo sfondo. Questo crea l'illusione della profondità ed è uno degli elementi chiave per un eccellente design di parallasse.

Lo sviluppatore Sebastian Schepis ha utilizzato solo CSS per questa pagina ed è un concetto piuttosto semplice. Penso che chiunque potrebbe clonarlo con facilità, per non parlare del design dello sfondo che potrebbe essere notevolmente migliorato.

Vedi l'effetto di parallasse a scorrimento CSS della penna di Sebastian Schepis

3. Parallasse di tag immagine semplice di Renan Breno

Troverai spesso disegni di parallasse accoppiati con grandi immagini di sfondo a schermo intero. Questi sono fin troppo comuni nei siti aziendali e nelle startup in cui di solito presentano una certa "velocità di scorrimento" di parallasse per lo sfondo.

La differenza qui non è tanto nella velocità con cui stai scorrendo la pagina o quanto è grande il posizionamento dell'immagine. Invece, puoi vedere la velocità con cui l'immagine si sposta sullo sfondo della pagina mentre scorri. È un sottile effetto di parallasse, ma questo layout è un modello eccellente per vedere le diverse velocità di animazione in azione.

Vedi la penna Simple Image Tag Parallax di Renan Breno

4. Parallasse e sfondi di immagini fisse

Gli sfondi delle immagini fissi funzionano bene per dividere le pagine e dividere le sezioni del contenuto in modo uniforme. Mentre scorri, può sembrare che le singole sezioni della pagina siano più alte delle immagini di sfondo. Tutto questo è stato progettato per dare vita all'effetto di parallasse durante lo scorrimento.

Non userei questo layout esatto perché le aree del contenuto sembrano un po' sottili. Ma se ti piace questo stile, ti consiglio di punteggiare ogni sezione della pagina con un'immagine diversa pertinente al tuo sito web.

Guarda Pen #Maincode Hackdays di chaobu

5. CSS Parallasse di Paulo Cunha

Questo esempio di parallasse è un esempio unico di come funzionano gli effetti di parallasse. Tutto il contenuto della pagina si trova sotto una grande immagine dell'eroe che scompare sotto il contenuto durante lo scorrimento. Questo utilizza anche la posizione fissa dell'immagine per far sembrare che la pagina si muova sull'immagine, piuttosto che l'immagine rimanga fissa in posizione.

Puoi usare questo stesso effetto con un layout a scorrimento lungo e avrebbe uno stile di design simile. Questo funzionerebbe meglio per i singoli post del blog con immagini in primo piano o pagine di destinazione che utilizzano grandi eroi per attirare l'attenzione.

Vedi la penna CSS Parallax di Paulo Cunha

6. Disegno di parallasse di Katie Rogers

Ecco un interessante design di parallasse per una pagina di matrimonio di esempio. Ha un design a pagina divisa in cui le immagini separano le molte diverse aree di contenuto con uno scorrimento fisso in parallasse. Tutto funziona su CSS, il che è un bel tocco e tutte le immagini di sfondo rimangono fisse mentre ci si sposta verso il basso nella pagina.

Questo effetto funziona perché le aree del contenuto hanno grandi ombre a riquadro che scendono sugli sfondi. Naturalmente, questo crea l'illusione della profondità dando alla pagina una fonte di luce teorica e una gerarchia: un'idea molto bella per un layout a pagina singola.

Guarda il design Pen Parallax di Katie Rogers

7. Scorrimento della parallasse dell'immagine di sfondo di Rich Howell

In precedenza, ho menzionato come la velocità di scorrimento potrebbe variare in base alla velocità di modifica della posizione dello sfondo. Questo esempio è il confronto perfetto per vedere come funziona in azione.

Nota che dovrai usare la barra di scorrimento per vedere gli effetti di questo esempio. Ho provato con la rotellina del mouse e non ho notato alcuna differenza, ma quando sposti la barra di scorrimento noterai cambiamenti di velocità tra le colonne.

Nessuna di queste velocità è una rappresentazione sbagliata o imprecisa del design del parallasse. Sono solo metodi diversi per creare movimento sulla pagina e questo piccolo esempio è un ottimo modo per visualizzare molte opzioni.

Guarda il Paralax dell'immagine di sfondo a scorrimento della penna di Rich Howell

8. Sfondo di parallasse stellato di Saransh Sinha

Sebbene questo effetto non sia correlato allo scorrimento, è direttamente correlato al design del parallasse. Usa puro CSS per creare un'animazione di parallasse sullo sfondo della pagina. Puoi aggiungere testo e persino un'area di contenuto sulla pagina, ma le stelle creano immediatamente profondità a prima vista.

L'animazione viene eseguita tramite CSS, ma questo snippet utilizza Sass e Compass, quindi sarebbe utile capire prima di apportare modifiche.

Guarda lo sfondo Pen Parallax Star in CSS di Saransh Sinha

9. Tela Parallax Skyline di Jack Rugile

A volte, i progetti di parallasse mirano anche al movimento del mouse insieme alle funzionalità di scorrimento. Questo disegno su tela crea un effetto skyline infinito che reagisce al movimento del mouse sulla pagina. Quando riposiziona il mouse, l'angolo di visualizzazione cambia. Ma l'animazione rimane la stessa e puoi vedere questo skyline che si muove con una chiara gerarchia visiva.

Naturalmente, questo richiede JavaScript per l'animazione perché è un'idea piuttosto complessa. Ma non è nemmeno qualcosa che troverai su molti siti Web, quindi non è nemmeno qualcosa che copierai sul tuo sito. Ma come concetto di parallasse, questo è davvero interessante.

Guarda la Pen Canvas Parallax Skyline di Jack Rugile

10. Filtro in vetro rotto di Bajjy Xilo

Ho già visto questo effetto sui siti Web, creando un design molto particolare. Il filtro di vetro rotto dà l'illusione di un'immagine di sfondo divisa in molte parti diverse. Sembra quasi che l'immagine fosse su una lastra di vetro, e si è frantumata, fratturando l'immagine e distorcendo l'immagine.

Puoi replicare questo effetto con CSS puro, ed è uno di quegli effetti accurati che è bello da fare ma potrebbe non avere alcun uso pratico e reale oltre ai design fantasiosi. Tuttavia, questo è un esempio impressionante di profondità e movimento di parallasse durante lo scorrimento.

Vedi il filtro CSS Pen BrokenGlass di Bajjy Xilo