18 tutorial sullo scorrimento della parallasse con jQuery e HTML5 – 2022
Pubblicato: 2022-03-17Il parallasse è in uso dalla fine degli anni '40 ed è più recentemente utilizzato in settori come i giochi, per creare esperienze di gioco uniche per tutti. Seriamente, la parallasse potrebbe sembrare una novità per i designer. Tuttavia, questo concetto ci accompagna da così tanto tempo che solo ora i designer stanno recuperando terreno e stanno stabilendo una tendenza attorno a questo effetto di scorrimento. Per restringere al meglio la descrizione del parallasse, è una tecnica unica nel web design che consente ai singoli componenti della pagina Web di scorrere insieme all'utente a vari intervalli di tempo, il che aiuta a creare l'effetto di uno sfondo in movimento dietro qualsiasi contenitore/griglia/contesto.
In Colorlib, abbiamo fatto del nostro meglio per prestare la massima attenzione possibile al parallasse, pur mantenendo una coerenza di approcci unici in ciascuno dei nostri articoli:
Ora vorremmo presentare i migliori tutorial di scorrimento parallasse che implicano l'uso di tecnologie come jQuery, JavaScript, HTML5 e CSS3. Ci siamo concentrati su tutorial che sono adatti ai nuovi arrivati nel web design e alcuni pezzi intermedi per spiegare le basi del parallasse e come funziona.
Prima di entrare nei nostri tutorial e tutto il resto, ci sono due aspetti da esaminare più da vicino: l'impatto dello scorrimento del parallasse sull'ottimizzazione dei motori di ricerca. Sicuramente l'utilizzo di funzionalità di progettazione dinamica avrà un impatto sul modo in cui i motori di ricerca elaborano il tuo sito Web e non vuoi accontentarti di una funzionalità che potrebbe avere un impatto negativo sul tuo traffico organico. Carla Dawson di Moz ha trattato questo argomento in grande dettaglio. Il principale punto di partenza del suo post è elencare 3 tecniche uniche che puoi applicare per rendere il tuo design di parallasse più SEO friendly. Tutto inizia ancor prima di provare a fare un effetto di parallasse funzionale sul tuo design, implementare prima la metodologia SEO e poi concentrarti sulla creazione dei contenuti, in questo modo lasci spazio ai motori di ricerca per capire come funziona il tuo sito web, ma consenti anche ai robot per elaborare il contenuto.
Il secondo aspetto è l'esperienza utente del design parallasse, se è adatto a tutti i progetti e che tipo di problemi può causare. Questo è uno studio di ricerca approfondito sugli effetti del design del parallasse sull'esperienza dell'utente, quindi ci vorrà del tempo per elaborare e comprendere completamente questo documento. Lo studio ha preso due gruppi di persone, entrambi forniti di siti Web di esempio da esplorare: parallasse e scorrimento standard. Il risultato finale non è stato sorprendente, gli utenti apprezzano di più lo scorrimento del parallasse, ma ciò comporta un costo di confusione e problemi generali di usabilità per quanto riguarda l'attenzione. Dovresti sempre dare la priorità agli utenti rispetto alle aggiunte fantasiose ai progetti del tuo sito web, se questo significa assumere un designer esperto professionista per analizzarti, allora dovresti andare avanti con quell'idea, specialmente se gestisci un'operazione commerciale su larga scala. Nella nostra esperienza, i siti Web su piccola scala possono solitamente utilizzare lo scorrimento in parallasse e non ha un impatto così grande sull'esperienza dell'utente o sull'usabilità generale.
Ora che abbiamo trattato questi due argomenti, possiamo iniziare ad apprendere alcune tecniche e metodi su come implementare lo scorrimento parallasse e creare i tuoi effetti di scorrimento parallasse. Il primo tutorial arriva da Petr Tichy, che da molti anni svolge lavori di front-end ed è un professionista affermato in questo settore. Imparerai la fase di configurazione iniziale della parallasse, come aggiungere effetti di animazione che siano anche integrati in parallasse e come allocare i tempi appropriati per ciascuna delle animazioni. Il tutorial è un po' complesso sotto alcuni aspetti, quindi rivolto a sviluppatori intermedi che hanno precedenti conoscenze JavaScript. Nello stesso tutorial, troverai un collegamento a uno dei precedenti tutorial di Petr sulla parallasse, che è molto più adatto ai principianti.
Ian Yates ha scritto questo tutorial all'inizio dell'anno e questo potrebbe essere uno dei tutorial più recenti su questo argomento che presenteremo in questa raccolta di tutorial di parallasse. Ian prende l'approccio di trarre ispirazione da un altro sito Web che utilizza una fantastica combinazione di effetti di parallasse e cerca di ricrearlo lui stesso. L'unica cosa, parla principalmente di design in primo piano che hanno caratteristiche di parallasse e menziona un piccolo frammento su come creare un effetto di sfondo unico usando JS e CSS.
I clienti non hanno molta conoscenza degli standard di progettazione, i clienti tendono solo a preoccuparsi delle tendenze e di cose come rendere un sito Web incredibilmente interessante e completamente unico per qualsiasi cosa possa essere definita concorrenza. Se stai lavorando con tali clienti, un tutorial conciso su come creare effetti di scorrimento unici su un design sarà essenziale e pensiamo che ne abbiamo uno qui che farà il lavoro, proprio così. Imparerai a strutturare il codice HTML5 con uno stile CSS3 e quindi integrato in un effetto di parallasse usando jQuery.
Il tutorial di Script Tutorials ha già raggiunto più di 17.000 designer e sviluppatori, questo numero ci ha incuriosito, poiché significa che il tutorial deve funzionare davvero e dovrebbe fornire un'esperienza di movimento di parallasse fluida. Dopo alcuni test locali, sembra proprio che sia così. Il solito approccio di parallasse di HTML e CSS, e tutto ciò che devi fare è copiare e incollare entrambi i codici nel tuo progetto e dovresti essere a posto. Tuttavia, possiamo immaginare che questo sia un po' più difficile nelle situazioni in cui è necessario implementarlo per progetti personalizzati, quindi forse dobbiamo continuare a cercare tutorial generali che possano aiutare in questo.
Andy Shora potrebbe essere in grado di aiutarci in tal senso. I suoi obiettivi principali sono creare un effetto di parallasse che non comprometta le prestazioni del sito Web, che si ottiene attraverso: ridurre al minimo la quantità di interazioni DOM per gli eventi di scorrimento e utilizzare l'accelerazione hardware per aumentare le prestazioni per i dispositivi mobili. In realtà, questa è un'altra guida per conoscere davvero il modo in cui i dispositivi mobili interagiscono con il parallasse e cosa si può fare per ottenere le massime prestazioni senza perdere qualità o design. Esplorerai due diversi frammenti di jQuery che vengono utilizzati per creare effetti di parallasse ottimali per le prestazioni su qualsiasi progetto di sito Web.
Poiché il parallasse è una tecnica così nuova (beh, ormai da qualche anno, ma ancora) presenta molte sfide che presenta agli sviluppatori che desiderano implementare il parallasse per i browser Web meno recenti, il processo non è così semplice e richiede un un po' di comprensione di come funzionano i vecchi browser con le nuove funzionalità web. Il tutorial prosegue mostrando esempi buoni e cattivi tra siti Web di parallasse e ciò che può essere appreso nel processo di analisi. Continua parlando anche di diversi angoli di parallasse, come verticale e orizzontale: le possibilità del moderno web design si sono davvero evolute a un nuovo livello. Imparerai a conoscere le librerie JavaScript più utili relative alla parallasse e ognuna di esse ha documentazione e tutorial individuali disponibili online, volevamo condividere quelle librerie noi stessi, ma la quantità non era troppo grande, quindi imparerai a tutti in questo tutorial. Questa è una risorsa davvero meravigliosa per tutto ciò che riguarda il parallasse, in particolare le interazioni e i diversi modi per ottenere un effetto di scorrimento dinamico.
Come creare un semplice effetto di parallasse
Sara Vieira, sebbene sia un'ottima sviluppatrice, non scherza con codice o terminologia complessi quando si tratta di argomenti come il parallasse. Preferisce creare una tecnica semplice per ottenere il risultato desiderato e ti consente di sperimentare il codice che ha condiviso al tuo ritmo. Sperimenterai con i tre grandi: JS, HTML e CSS. Il modo migliore per sperimentare sarebbe su un server web locale o in una cartella separata sul tuo server live e vedere che tipo di risultati puoi ottenere in questo modo.
L'effetto di parallasse con jQuery
La cosa bella di questo tutorial è che è già implementato nella pagina che stai visualizzando, quindi in realtà non c'è molto bisogno di spiegare in testo scritto, ma piuttosto fornire un esempio sotto forma di codice live. Puoi prendere lo snippet HTML/CSS e combinarlo con lo snippet jQuery per ottenere lo stesso effetto di parallasse della pagina che stai visualizzando. Con una piccola descrizione (commento) frammenti disponibili sul lato destro di ciascuno dei frammenti di codice.
In definitiva, vuoi fare affidamento il più possibile sui CSS. CSS significa prestazioni di gran lunga migliori e meno problemi nel gestire linguaggi dinamici come jQuery. Quello che hai qui è un semplice snippet CSS che parallasse i tuoi contenitori di contenuti e renderà l'esperienza dei contenuti molto più ricca, con un ottimo benchmark delle prestazioni.
Stellar.js è una libreria JavaScript abbastanza popolare creata per aiutare ad aggiungere rapidamente effetti di parallasse ai tuoi siti web. Sebbene la libreria non abbia visto molto sviluppo nell'ultimo anno, è ancora attivamente utilizzata da sviluppatori e designer in tutta la comunità. Esplorerai il processo su come incorporare Stellar nei tuoi progetti in modo che a determinati elementi venga concesso l'effetto di parallasse. Una libreria è sicuramente una scelta sicura nel collegare tali funzionalità dinamiche, perché può essere facilmente staccata dal flusso di lavoro di sviluppo principale, se necessario.
Usare Parallasse per far risaltare il tuo sito WordPress
La parallasse è utilizzata in così tanti contesti diversi, c'è da chiedersi cosa abbia spinto gli utenti a tornare a questa entusiasmante funzionalità e, per molti, questa ragione è stata la capacità di raccontare storie migliori, attraverso l'uso di animazioni a scorrimento fluido che possono prendere il lettore da una parte all'altra della storia, con quel meraviglioso movimento fluido. E per quanto riguarda i blog WordPress, come possiamo aggiungere parallasse a WordPress senza l'uso di temi unici che supportano la funzione? Se questa è la tua unica domanda davvero scottante, troverai tutte le risposte nel seguente tutorial. Riteniamo che questo sia il tutorial più completo sulla parallasse per i blog WordPress e speriamo che presto aggiungerai questi fantastici effetti ai tuoi blog. Salta l'introduzione se sai già cosa fa il parallasse, gran parte della guida è dedicata alla spiegazione del parallasse in dettaglio, quindi evita tutto ciò che ti sembra di sapere già al riguardo.
Cos'è Wix? È la principale piattaforma gratuita per la creazione di siti Web sul Web e questi ragazzi sono in attività da sempre! Non si tratta di un gran tutorial, piuttosto di un avvertimento per gli sviluppatori che lavorano con i clienti e il tipo di client che preferiscono utilizzare piattaforme come Wix per ospitare e creare i propri siti web. Ora gli utenti Wix possono anche godere dell'effetto parallasse e hanno un sacco di buone demo da mostrarti, per attirarti. Stiamo scherzando ovviamente, l'utilizzo di Wix può far risparmiare così tanto tempo per dover costruire un design unico e, sorprendentemente, la domanda di siti Web non è diminuita, anche se i clienti potrebbero realizzare questi fantastici progetti se solo dedicassero un po' di tempo in più per conoscere la piattaforma che utilizzano per ospitare il loro sito Web. Non aver paura di offrire ai nuovi clienti la possibilità di ospitare il loro sito Web con Wix o qualsiasi altra piattaforma di creazione di siti Web. È un passo nella giusta direzione per quanto riguarda la manutenzione del sito Web e, in alcuni casi; anche le prestazioni.
Parallasse orizzontale utilizzando CSS
Hai molte scelte per la progettazione di parallasse, quindi fintanto che sai cosa stai facendo come designer e sviluppatore front-end, puoi trasformare qualsiasi cosa in un effetto di parallasse, persino replicare un paesaggio usando nient'altro che un po' di CSS e jQuery Magia! Dave Chenell ti guida attraverso i passaggi necessari per creare un effetto di progettazione del paesaggio in parallasse.
Come creare illustrazioni di parallasse multistrato con CSS e Javascript
L'effetto di parallasse a strati consiste nell'usare due immagini una sopra l'altra per dispiegare un particolare scenario visivo. Ciò migliorerà ulteriormente l'esperienza visiva che i tuoi utenti avranno con il tuo design/sito web, e questa è anche una grande opportunità per esplorare le possibilità dell'arte disegnata a mano e la sua incorporazione nel design del sito web, poiché per lo più vorrai usare qualcosa che possono sovrapporsi l'uno sull'altro e avere un senso completo, come vedrai nell'anteprima della demo.
Siti web di pura parallasse CSS
Bel tutorial introduttivo sulla creazione di un solido effetto di scorrimento usando il parallasse, usando nient'altro che CSS nativo.
Ricreare l'effetto di parallasse di Firewatch
Il parallasse è stato chiamato con molti nomi e c'è sicuramente un gruppo fedele di designer/sviluppatori che odiano assolutamente la tendenza del parallasse, ma cosa puoi fare, sembra funzionare per così tanti, quindi perché smettere di produrre tutorial e contenuti su come rendere possibile questo effetto in tempo reale. Il tutorial che abbiamo qui ricreerà un effetto particolare dal sito Web di Firewatch, per creare una sorta di effetto paesaggio combinato con elementi che cadono per consentire un ulteriore sviluppo del contenuto. All'inizio sembra complicato, ma Hamish (autore del tutorial) si prende cura di spiegare tutto passo dopo passo.
Qualunque siano le tue esigenze, riteniamo che i tutorial che abbiamo elencato copriranno assolutamente tutti gli aspetti che derivano da questa tendenza emergente del web design. Da effetti semplici, a effetti ottimizzati per le prestazioni, ad approcci unici per offrire un'esperienza di contenuto che verrà ricordata per più di un paio di minuti. Gran parte di ciò che accade nel web design si riduce all'ispirazione e al modo in cui ispirare utenti e lettori con colpi di scena unici ottenuti attraverso la competenza nel design.