20 tutorial di scorrimento parallasse con jQuery e HTML5 - 2017

La parallasse è in uso dalla fine degli anni '40 e, più recentemente, in settori come i giochi, per creare esperienze di gioco uniche per tutti. Seriamente, la parallasse potrebbe sembrare una cosa nuova per i designer, ma questo concetto ci accompagna già da così tanto tempo che i designer stanno recuperando terreno solo ora e stanno stabilendo chiaramente una tendenza attorno a questo effetto di scorrimento. Per restringere al meglio la descrizione della 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 consente di creare un effetto di sfondo in movimento dietro qualsiasi contenitore/griglia/contesto.

In Colorlib, abbiamo fatto del nostro meglio per dare la migliore attenzione possibile alla parallasse, pur mantenendo una coerenza di approcci unici in ciascuno dei nostri articoli:

• Splendidi temi WordPress con scorrimento parallasse
• Modelli di siti Web di parallasse HTML5/CSS3
• Temi WordPress a scorrimento parallasse gratuiti
• Dove trovare temi WordPress con parallasse premium e gratuiti
• Nuovi modelli WordPress con effetto di scorrimento parallasse

Ora vorremmo introdurre i migliori tutorial di scorrimento parallasse che prevedono l'uso di tecnologie come jQuery, JavaScript, HTML5 e CSS3. Ci siamo concentrati su tutorial che siano amichevoli per i nuovi arrivati ​​nel web design, ma anche alcuni pezzi intermedi per spiegare davvero le basi della parallasse e come funziona.

Siti web con scorrimento parallasse e SEO

Prima di entrare nei nostri tutorial e tutto il resto, ci sono due aspetti da esaminare più da vicino e uno di questi è l'impatto dello scorrimento 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 vorrai accontentarti di una funzionalità che potrebbe avere un impatto negativo sul tuo traffico organico. Carla Dawson di Moz ha trattato questo argomento nei minimi dettagli. La conclusione principale del suo post è l'elenco di 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, prima implementare 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 permetti anche ai robot per elaborare il contenuto.

Gli effetti dello scorrimento parallasse sull'esperienza utente nel web design

Il secondo aspetto è l'esperienza utente del design parallasse, se è adatto a tutti i design e che tipo di problemi può causare. Questo è uno studio di ricerca approfondito condotto sugli effetti del design della parallasse per l'esperienza dell'utente, quindi tieni presente che ci vorrà del tempo per elaborare e comprendere appieno questo documento. Lo studio ha preso due gruppi di persone, a cui sono stati dati siti web di esempio da esplorare: parallasse e scorrimento standard. Il risultato finale non è stato sorprendente, agli utenti piace di più lo scorrimento parallasse, ma questo ha un costo di confusione e preoccupazioni generali sull'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 fare l'analisi per te, 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 di solito possono farla franca utilizzando lo scorrimento parallasse e non ha un impatto così grande sull'esperienza dell'utente o sull'usabilità generale.

Semplice tutorial sullo scorrimento della parallasse

Ora che abbiamo trattato questi due argomenti, possiamo iniziare a imparare alcune tecniche e metodi reali su come implementare lo scorrimento parallasse e come creare i propri effetti di scorrimento parallasse. Il primo tutorial viene da Petr Tichy, che fa lavoro front-end da molti anni ed è un professionista affermato in questo settore. Imparerai la fase di configurazione iniziale della parallasse, come aggiungere effetti di animazione che sono anche integrati con la parallasse e come allocare i tempi corretti per ciascuna delle animazioni. Il tutorial è un po' complesso per certi versi, quindi è rivolto a sviluppatori intermedi che hanno una precedente conoscenza di JavaScript. Nello stesso tutorial, troverai un collegamento a uno dei precedenti tutorial di Petr su Parallax, che è molto più adatto ai principianti.

Ispirazione per il web design: scrollando, scrollando, scrollando

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 sulla parallasse. Ian adotta l'approccio di trarre ispirazione da un altro sito Web che utilizza una grande combinazione di effetti di parallasse e cerca di ricrearlo da solo. L'unica cosa, parla principalmente di design in primo piano con funzionalità di parallasse e menziona un piccolo frammento su come creare un effetto di sfondo unico usando JS e CSS.

Tutorial scorrimento parallasse: come creare un sito web parallasse

I clienti non hanno molta conoscenza degli standard di design, i clienti tendono a preoccuparsi solo delle tendenze e di cose come rendere un sito Web incredibilmente interessante e completamente unico per tutto ciò che potrebbe essere definito concorrenza. Se stai lavorando con tali clienti, un breve tutorial su come creare effetti di scorrimento unici su un design sarà essenziale, e penso che ne abbiamo uno qui che porterà a termine il lavoro, proprio così. Imparerai a strutturare il codice HTML5 che è stilizzato con CSS3 e quindi integrato in un effetto di parallasse utilizzando jQuery.

Semplice effetto di scorrimento parallasse

L'effetto che ricreerai qui è destinato a design semplici. Un tradizionale effetto di parallasse che fa scorrere il contenuto visivo lungo il contenuto lungo la pagina, senza far sembrare che le immagini siano statiche, ma invece le rende più dinamiche e interattive con il design. Molti temi WordPress in questi giorni utilizzano anche questa tecnica di parallasse, e non possiamo dire che non abbia avuto successo, perché lo ha fatto. Creerai "sezioni" HTML5 che contengono il contenuto e utilizzerai semplici CSS3 per far funzionare l'effetto in azione. Semplicemente utilizzando la combinazione HTML5 + CSS3, stai risparmiando molti punti di prestazione in termini di integrazione nativa per il browser.

Tutorial scorrimento parallasse

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 che sia davvero così. Il solito approccio di parallasse di HTML e CSS, e tutto ciò che devi fare è copiare e incollare entrambi i codici nel tuo design e dovresti essere a posto. Tuttavia, possiamo immaginare che questo sia un po' più difficile in situazioni in cui è necessario implementarlo per progetti personalizzati, quindi forse dobbiamo continuare a cercare tutorial generali che possano aiutare in questo.

Come implementare gli effetti di parallasse sullo scorrimento usando CSS e jQuery

Andy Shora potrebbe aiutarci in questo senso. I suoi obiettivi principali sono creare un effetto di parallasse che non comprometta le prestazioni del sito Web, che si ottiene riducendo al minimo la quantità di interazioni DOM per gli eventi di scorrimento e utilizzando 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 la parallasse e cosa si può fare per ottenere le massime prestazioni senza perdere qualità o appeal del 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.

La guida definitiva allo scorrimento parallasse

Poiché la parallasse è una tecnica così nuova (beh, da qualche anno, ma ancora) presenta molte sfide per gli sviluppatori che desiderano implementare la parallasse per i browser Web più vecchi, il processo non è così facile e richiede un un po' di comprensione di come i vecchi browser funzionano con le nuove funzionalità web. Il tutorial continua a mostrare 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 web design moderno si sono davvero evolute a un nuovo livello. Imparerai a conoscere le librerie JavaScript più utili relative alla parallasse e ognuna di esse ha documentazioni e tutorial individuali disponibili online, volevamo condividere queste 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 la 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 grande sviluppatore, non si 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 consente di sperimentare il codice che ha condiviso al proprio 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 di dare 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 un piccolo frammento di descrizione (commento) disponibile sul lato destro di ciascuno dei frammenti di codice.

Creazione di effetti di parallasse a scorrimento con CSS

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 frammento CSS che parallasserà i tuoi contenitori di contenuti e renderà l'esperienza dei contenuti molto più ricca, con un ottimo benchmark delle prestazioni.

Un'introduzione allo scorrimento parallasse utilizzando Stellar.js

Stellar.js è una libreria JavaScript ragionevolmente popolare creata per aiutarti ad aggiungere rapidamente effetti di parallasse ai tuoi siti web. Sebbene la libreria non abbia visto molti sviluppi nell'ultimo anno, è ancora attivamente utilizzata da sviluppatori e designer in tutta la comunità. Esplorerai il processo di 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 caratteristiche così dinamiche, perché può essere facilmente staccata dal flusso di lavoro di sviluppo principale, se necessario.

Usare Parallax per far risaltare il tuo sito WordPress

Il parallasse viene utilizzato in così tanti contesti diversi, c'è da chiedersi cosa abbia fatto sì che gli utenti tornassero a questa entusiasmante funzionalità, e per molti questo motivo è 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 aggiungiamo la 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 di parallasse per i blog WordPress e speriamo che presto aggiungerai questi fantastici effetti ai tuoi blog. Salta l'introduzione se sai già cosa fa la parallasse, gran parte della guida è dedicata a spiegare la parallasse in dettaglio, quindi evita tutto ciò che ti sembra di conoscerla già.

Affascina gli spettatori del tuo sito con lo scorrimento parallasse

Cos'è Wix? È la principale piattaforma di creazione di siti Web gratuita sul Web e questi ragazzi sono in attività da sempre! Questo non è tanto un tutorial, piuttosto un avvertimento per gli sviluppatori che lavorano con i clienti e il tipo di clienti 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, usare 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 da soli questi fantastici progetti se solo si prendessero 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 usando i CSS

Hai molte scelte per il design di parallasse, quindi finché 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 un'illustrazione di parallasse multistrato con CSS e Javascript

L'effetto di parallasse a strati consiste nell'usare due immagini una sopra l'altra per spiegare 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 demo.

Siti web con parallasse CSS puro

Bel tutorial introduttivo sulla creazione di un solido effetto di scorrimento utilizzando la parallasse, utilizzando nient'altro che CSS nativo.

Ricreare l'effetto di parallasse di Firewatch

Parallax è stato chiamato con molti nomi, e c'è sicuramente un fedele gruppo di designer/sviluppatori che odiano assolutamente la tendenza del parallasse, ma cosa puoi fare, sembra funzionare per così tanti, quindi perché fermarsi a produrre tutorial e contenuti su come rendere possibile questo effetto in tempo reale. Il tutorial che abbiamo qui ricreerà un particolare effetto dal sito Web di Firewatch, per creare una sorta di effetto orizzontale combinato con elementi che cadono per consentire uno sviluppo extra del contenuto. All'inizio sembra complicato, ma Hamish (autore del tutorial) si prende cura di spiegare tutto passo dopo passo.

Tutorial di scorrimento parallasse con esempi CSS3, HTML5 e jQuery

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 semplici effetti, a effetti ottimizzati per le prestazioni, ad approcci unici per offrire un'esperienza di contenuto che sarà ricordata per più di un paio di minuti. Gran parte di ciò che accade nel web design si riduce all'ispirazione e a come ispirare utenti e lettori con colpi di scena unici ottenuti attraverso la competenza nel design.