Share
Una delle più grandi tendenze del recente web design moderno è l'uso degli effetti di scorrimento della parallasse. In questo tutorial ti mostrerò come puoi creare l'effetto sul tuo sito web, con un po 'di immaginazione e un piccolo aiuto da Stellar.js.
Ti interessa risparmiare tempo e assicurarti di utilizzare le migliori pratiche moderne? C'è un ottimo plugin di jQuery slider reattivo su Envato Market che potrebbe fare il lavoro alla perfezione! È già utilizzato su oltre 150.000 siti Web.
L'effetto di scorrimento della parallasse è stato popolare sin da quando siti come Nike's Better World l'hanno introdotto sui loro siti web alcuni anni fa. L'effetto di parallasse per quanto riguarda le interfacce è stato intorno dal 1980 quando è stato utilizzato per la prima volta nei titoli di videogiochi e successivamente nei giochi stessi. Più recentemente ha iniziato a comparire nelle interfacce Web: avrai familiarità con silverbackapp che ha usato l'effetto come parte dell'intestazione.
Se combinato con la funzionalità di scorrimento di un sito Web, gli effetti di scorrimento della parallasse possono avere un forte impatto visivo, soprattutto se combinati con una qualche forma di storia che ti porta in un viaggio.
La parallasse è uno spostamento o una differenza nella posizione apparente di un oggetto osservato lungo due diverse linee di vista. - Wikipedia
Quindi cos'è esattamente l'effetto della parallasse? Beh, probabilmente è una delle cose a cui i tuoi clienti fanno riferimento quando dicono ciecamente "Voglio il mio sito HTML5". Ogni volta che i clienti mi chiedono un sito "HTML5", devo chiedere loro in particolare come interpretano il significato di HTML5 - al momento sembra proprio la parola d'ordine che i clienti continuano a dirmi senza capire veramente cosa significhi.
Quindi è HTML5? Sicuramente HTML5 ha una parte da giocare nell'effetto di scorrimento della parallasse ma è più che HTML5, utilizza anche una qualche forma di javascript, come jQuery, e non sarebbe possibile senza un po 'di CSS3.
La parallasse parola attuale deriva dal greco παραλλαξη (parallaxis) che significa alterazione. Gli oggetti che sono più vicini all'occhio hanno una parallasse più ampia rispetto agli oggetti che sono in lontananza. Ciò significa che gli oggetti che sono più vicini a noi possono sembrare muoversi più velocemente degli oggetti sullo sfondo.
Sovrapporre più sfondi e oggetti (come le immagini) e quindi consentire loro di muoversi a velocità diverse crea una sensazione di profondità e dimensione.
Dai un'occhiata ad alcuni esempi che dimostrano gli effetti di parallasse.
Gli esempi ti portano soprattutto su qualche forma di viaggio o storia, e lo fanno in una varietà di modi diversi. Questo, secondo me, è ciò che rende un sito di scorrimento di parallasse un successo. La chiave per renderlo interessante e unico è concentrarsi su una buona storia e un concetto, quindi usare l'effetto in modi creativi e fantasiosi.
Wieden + Kennedy (W & K), i ragazzi dietro al sito Nike Better World supportano questo:
A nostro avviso, le tecnologie sono indipendenti dal concetto. Il nostro obiettivo principale era creare una grande esperienza di narrazione interattiva. - Wieden + Kennedy (W & K)
Per dimostrare un modo di implementare lo scrolling della parallasse nel tuo sito web, ho scelto di mostrarti un semplice sito web con quattro diapositive che utilizza l'effetto su sfondi e immagini diversi. Ho anche aggiunto una navigazione nell'angolo a sinistra che scorrerà fino a una specifica diapositiva sul sito e cambierà anche la dimensione per riflettere il numero di diapositiva attivo. Sto anche usando il font web Bebas, anche se sei libero di usare qualcos'altro se lo desideri.
Ecco come apparirà la nostra struttura di cartelle:
Per aiutarmi a raggiungere questo obiettivo sto utilizzando Stellar.js, un plug-in jquery di Mark Dalgleish che semplifica la creazione di siti a scorrimento parallasse. Ci sono altri plugin disponibili per aiutarti a fare ciò che ho elencato in fondo a questo articolo. Ho scelto di utilizzare Stellar.js perché è abbastanza semplice da implementare e, sebbene non sia stato dimostrato durante questo tutorial, può essere ottimizzato per lavorare su piattaforme di dispositivi intelligenti come iOS.
Userò anche i waypoint jQuery di Caleb Troughton. Waypoint è un altro plugin jQuery che esegue una funzione ogni volta che scorri verso un elemento. Ciò consente alla navigazione sul sito di evidenziare la diapositiva su cui ci troviamo in base alla posizione della barra di scorrimento.
jQuery easing è un plugin di GSGD che offre opzioni di andamento avanzate. Lo useremo per aggiungere un piacevole movimento di spostamento durante la transizione da una diapositiva all'altra.
Dando il via al nostro index.html aggiungiamo il doctype HTML5 e quindi creiamo la sezione head. Questo consiste in un reset CSS seguito dal nostro foglio di stile 'styles.css'. Quindi aggiungiamo la libreria jQuery seguita dal nostro file jQuery personalizzato 'js.js'. Questo è seguito dai tre plugin, "jquery.stellar.min.js", "waypoints.min.js" e "jquery.easing.1.3.js".
Crea un sito Web di parallasse usando Stellar.js
Il prossimo elemento nel nostro html è l'immagine del logo Envato che rimane in una posizione fissa costante in tutto il sito. A questo aggiungiamo una classe di 'envatologo' in modo che possiamo impostarne il posizionamento in un secondo momento quando eseguiamo la codifica del CSS.
Le quattro diapositive usano lo stesso codice:
Usiamo una classe di 'slide' che verrà utilizzata come stile generale per tutte le diapositive. Ad ogni diapositiva viene quindi assegnato un ID di "diapositiva" seguito dal numero della diapositiva, ad esempio "Diapositiva1". Usiamo l'attributo di dati HTML5 e lo chiamiamo 'data-slide'. Questo ci permetterà di targetizzarlo usando jQuery. È stato aggiunto un altro attributo dati di "data-stellar-background-ratio". Questo è specifico per il plugin jQuery di stellar.js e indica al plug-in quale rapporto deve scorrere la velocità dell'elemento.
Il rapporto è relativo alla velocità di scorrimento naturale, quindi un rapporto di 0,5 farebbe scorrere l'elemento a metà velocità, un rapporto di 1 non avrebbe alcun effetto e un rapporto di 2 farebbe scorrere l'elemento al doppio della velocità.
Tutte le diapositive tranne la diapositiva quattro hanno un pulsante che ci permetterà di scorrere fino alla diapositiva successiva. A questo aggiungiamo l'attributo 'data-slide' con il valore del prossimo numero di diapositiva. Questo è così il pulsante sa quale diapositiva è successiva in modo che possiamo passare questo valore a jQuery. La maggior parte delle diapositive ha anche una campata con una classe di 'slideno'; semplicemente una grande versione di testo del numero di diapositiva che appare nell'angolo in basso a sinistra della maggior parte delle diapositive. Questo potrebbe anche essere usato per i titoli.
Accentsconagua
Diapositiva 1 Sulle diapositive tre e quattro aggiungiamo anche alcuni elementi dell'immagine al div "slide". Queste immagini forniranno una vera visione dell'effetto di parallasse che stiamo creando. Le avvolgiamo in un div "wrapper" che sarà centralizzato ed è "960px" di larghezza, questo è solo per garantire che venga visualizzato su tutte le dimensioni del monitor desktop.
Ad ogni immagine è associato un attributo 'data-stellar-ratio'. Questo di nuovo è stellar.js specifico e dice al plugin a quale rapporto di velocità dovremmo scorrere l'elemento.
Fortunatamente per noi non c'è molto coinvolgimento con il CSS. Fondamentalmente è lo styling di alcuni elementi semplici, ma la maggior parte è per posizionare alcuni degli elementi dell'immagine.
La prima cosa che dobbiamo fare con il nostro CSS è portare il font BEBAS usando @ font-face. Quindi lo aggiungiamo all'html per impostare il carattere per il sito. Impostiamo anche la larghezza e l'altezza di html e body al 100%. Ciò consentirà alle nostre diapositive di adottare l'intera larghezza e altezza dello schermo dell'utente.
@ font-face font-family: 'BebasRegular'; src: url ('font / BEBAS ___- webfont.eot'); src: url ('font / BEBAS ___- webfont.eot? #iefix') formato ('embedded-opentype'), url ('font / BEBAS ___- webfont.woff') formato ('woff'), url ('font / BEBAS ___- webfont.ttf ') format (' truetype '), url (' font / BEBAS ___- webfont.svg # BebasRegular ') format (' svg '); font-weight: normal; stile font: normale; html, body font-family: 'BebasRegular'; width: 100%; height: 100%; La navigazione principale è data una posizione 'fissa' per tenerlo nello stesso posto in tutto il sito. Abbiamo compensato questo 20px dall'alto per dare un po 'di spazio sopra di esso e impostare lo z-index su 1 per assicurarci che questo si trovi nello strato superiore del sito.
L'elenco attuale è solo lo stile del testo con un bordo sul fondo per fungere da sottolineatura. Questo ha una larghezza di 53 px. Viene aggiunta anche una transizione in modo che si anima dal suo stato standard al suo stato di passaggio del mouse. Ho usato il prefisso -webkit- solo per mantenere il codice breve, ma il codice sorgente completo che può essere scaricato sopra contiene tutti i prefissi dei fornitori.
Lo stato di hover utilizza anche le stesse proprietà della classe 'active'; fondamentalmente solo un aumento delle dimensioni e della larghezza del carattere. La classe 'active' è usata da jQuery per dare uno stile alla diapositiva pertinente che è in vista della finestra del browser.
.navigazione posizione: fissa; z-index: 1; top: 20px; .navigation li color: # 333333; blocco di visualizzazione; padding: 0 10px; line-height: 30px; margin-bottom: 2px; font-weight: bold; -webkit-transition: all .2s easy-in-out; border-bottom: 1px solido nero; text-align: left; larghezza: 53px; .navigation li: hover, .active font-size: 25px; cursor: pointer; ! Width: 100px importante;
Il logo envato ha alcuni stili di posizionamento solo per garantire che rimanga al centro dello schermo. Analogamente alla navigazione, viene fornito anche un indice z di "1" per garantire che rimanga in cima.
.envatologo posizione: fissa; superiore: 50%; a sinistra: 50%; larghezza: 446px; margin-top: -41px; margin-left: -223px; z-index: 1;
Ora passiamo allo stile delle diapositive effettive. Diamo loro una proprietà 'fissa' per l'allegato. La proprietà background-attachment imposta se un'immagine di sfondo è fissa o scorre con il resto della pagina, quindi è utile per le immagini di sfondo (come quelle utilizzate nella diapositiva quattro). Per questo esempio abbiamo usato uno sfondo di Philipp Seiffert che può essere scaricato qui. Impostiamo la posizione della diapositiva su 'relativa'. In questo modo possiamo posizionare in modo assoluto le classi "slideno" e "pulsante" rispetto alla diapositiva anziché il documento vero e proprio.
L'ombra della scatola è puramente per scopi decorativi e aggiunge una bella ombra all'angolo superiore di ogni diapositiva.
.slide background-attachment: fixed; width: 100%; height: 100%; posizione: relativa; box-shadow: inset 0px 10px 10px rgba (0,0,0,0,3); .wrapper width: 960px; height: 200px; margine: 0 auto; position: relative; . slideno posizione: assoluta; bottom: 0px; a sinistra: 0px; font-size: 100px; font-weight: bold; colore: RGBA (255,255,255,0.3);
Il pulsante .button è per il pulsante nella parte inferiore della pagina che ci consente di passare alla diapositiva successiva. L'abbiamo posizionato in basso al centro di ogni diapositiva e utilizzato l'immagine di una freccia come indicatore.
.pulsante display: block; larghezza: 50px; altezza: 50px; position: absolute; bottom: 0px; a sinistra: 50%; background-color: # 333333; background-image: url (... /images/arrow.png); background-repeat: no-repeat; .button: hover background-color: # 494949; cursor: pointer;
Lo stile per ogni singola diapositiva è relativamente semplice e segue lo stesso schema ogni volta. La diapositiva ha il colore di sfondo di "# 5c9900". La diapositiva due ha anche un colore di sfondo impostato su di essa. La diapositiva due contiene anche immagini e possiamo scegliere come target ciascuna utilizzando il selettore CSS nth-child (n). Questo selettore può essere descritto come
Questa pseudo-classe combina gli elementi in base alle loro posizioni all'interno dell'elenco di elementi figlio di un elemento genitore.
Quindi in pratica definiamo ogni immagine nell'ordine in cui appaiono nel nostro markup. Li stiamo semplicemente posizionando rispetto al wrapper della diapositiva.
/ ****************************** SLIDE 1 ***************** ************** / # slide1 background-color: # 5c9900; / ****************************** SLIDE 2 **************** *************** / # slide2 background-color: # 005c99; # slide2 img: first-child position: absolute; In alto: 700 px; a sinistra: -150 px; # slide2 img: nth-child (2) position: absolute; top: 300px; a sinistra: 100px; # slide2 img: nth-child (3) position: absolute; top: 600px; a sinistra: 300px; # slide2 img: nth-child (4) position: absolute; top: 400px; a sinistra: 300px; # slide2 img: nth-child (5) position: absolute; top: 600px; destra: 300px; # slide2 img: nth-child (6) position: absolute; top: 600px; destra: 300px; # slide2 img: nth-child (7) position: absolute; top: 400px; destra: 100px; # slide2 img: nth-child (8) position: absolute; top: 100px; destra: 300px;
La diapositiva tre segue lo stesso seme della diapositiva due.
/ ****************************** SLIDE 3 ***************** ************** / # slide3 background-color: # b6c10b; # slide3 img: first-child position: absolute; In alto: 700 px; a sinistra: 300 px; # slide3 img: nth-child (2) position: absolute; top: 100px; a sinistra: 100px; # slide3 img: nth-child (3) position: absolute; top: 150px; a sinistra: 300px; # slide3 img: nth-child (4) position: absolute; top: 450px; a sinistra: 300px; # slide3 img: nth-child (5) position: absolute; top: 200px; destra: 300px; # slide3 img: nth-child (6) position: absolute; top: 100px; destra: 300px;
La diapositiva quattro è leggermente diversa dalle due diapositive precedenti in quanto non contiene alcun elemento immagine o colore di sfondo, ma utilizza invece un'immagine di sfondo. Abbiamo anche fornito la proprietà CSS3 'background-size: cover'. In pratica, l'immagine di sfondo viene impostata per coprire l'intera finestra del browser e verrà ridimensionata con il ridimensionamento della finestra del browser. Abbiamo anche aggiunto una riga di testo sull'ultima diapositiva che abbiamo disegnato e data una classe di 'parallaxbg'
/ ****************************** SLIDE 4 ***************** ************** / # slide4 background-image: url (... /images/Slide4/desktop4.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-sfondo-size: copertina; dimensione di sfondo: copertina; # slide4 .parallaxbg position: absolute; destra: 40px; top: 40px; font-size: 28px; colore: RGBA (51,51,51,0.3);
Il jQuery è davvero dove questa cosa inizia a prendere vita. Ho commentato il codice in modo che tu possa vedere esattamente cosa sta succedendo.
jQuery (document) .ready (function ($) // initialise Stellar.js $ (window) .stellar (); // Cache alcune variabili var links = $ ('. navigation'). find ('li'); slide = $ ('. slide'); button = $ ('. button'); mywindow = $ (window); htmlbody = $ ('html, body'); // Setup waypoint plugin plugin.waypoint (function (evento , direzione) // memorizza nella cache la variabile dell'attributo slide dati associata a ogni diapositiva dataslide = $ (this) .attr ('data-slide'); // Se l'utente scorre verso l'alto cambia il link di navigazione che ha lo stesso attributo slide di dati come diapositiva su attivo e // rimuove la classe attiva dal precedente link di navigazione if (direzione === 'down') $ ('. navigation li [data-slide = "' + dataslide + '" ] '). addClass (' active '). prev (). removeClass (' active '); // else Se l'utente scorre verso il basso, modifica il link di navigazione che ha lo stesso attributo di diapositiva dei dati della diapositiva su attivo e / / rimuove la classe attiva dal prossimo link di navigazione else $ ('. navigation li [data-slide = "' + dataslide + '"]'). addClass ('attivo'). ) .RemoveClass ( 'attivo'); ); // i waypoint non rilevano la prima diapositiva quando l'utente scorre verso l'alto in modo tale che aggiungiamo un po 'di codice, che rimuove la classe // dalla diapositiva 2 del link di navigazione e la aggiunge alla diapositiva di collegamento 1. mywindow.scroll (funzione () if (mywindow.scrollTop () == 0) $ ('. navigation li [data-slide = "1"]'). addClass ('active'); $ ('. navigation li [data-slide = "2"] '). RemoveClass (' active ');); // Crea una funzione che verrà passata a un numero di diapositiva e quindi scorrerà verso quella diapositiva usando jquerys animate. Viene usato anche il plug-in di easing di Jquery //, quindi abbiamo passato il metodo di easing di 'easeInOutQuint' che è disponibile attraverso il plugin. function goToByScroll (dataslide) htmlbody.animate (scrollTop: $ ('. slide [data-slide = "' + dataslide + '"]'). offset (). top, 2000, 'easeInOutQuint'); // Quando l'utente fa clic sui collegamenti di navigazione, ottiene il valore dell'attributo della diapositiva dei dati del collegamento e passa tale variabile alla funzione goToByScroll links.click (function (e) e.preventDefault (); dataslide = $ (this ) .attr ('data-slide'); goToByScroll (dataslide);); // Quando l'utente fa clic sul pulsante, ottieni il valore dell'attributo della diapositiva dei dati del pulsante e passa tale variabile alla funzione goToByScroll button.click (function (e) e.preventDefault (); dataslide = $ (this ) .attr ('data-slide'); goToByScroll (dataslide);); ); 
Se osservi la diapositiva due del nostro esempio, noterai le bolle 3D. Ho aggiunto una leggera sfocatura gaussiana ad alcuni di questi, principalmente a quelli in primo piano e sullo sfondo. Combinandoli con bolle ben focalizzate si aggiunge al senso di profondità creato dalla parallasse. Questo è qualcosa che dovresti prendere in considerazione quando cerchi di ottenere una buona profondità sul tuo sito.
Un sacco di siti che utilizzano questo effetto tendono ad essere piuttosto pesanti, assicuratevi di comprimere le immagini il più possibile (senza sacrificare la qualità). Se dopo la compressione ci vuole ancora un po 'di tempo per caricare, allora considera di aggiungere un caricatore al tuo sito.
Lo scrolling di parallasse è uno degli effetti più amati degli ultimi tempi e le persone stanno costantemente spingendo i confini con esso. Qui oggi ti ho mostrato come configurare un sito web di base che utilizza lo scrolling della parallasse. La demo che ho mostrato oggi è un sito relativamente semplice per scopi di apprendimento. Per quelli di voi che stanno per creare un sito usando questo effetto, vi esorto a dedicare del tempo al concetto e alla storia poiché questo è ciò che li rende unici, condivisibili e davvero un piacere da esplorare. Si tratta di come utilizzare saggiamente questo effetto e non solo di usarlo per il gusto di usarlo.
Spero ti sia piaciuto leggere lo scrolling della parallasse e mi piacerebbe vedere come lo hai utilizzato nei tuoi stessi siti, sentiti libero di lasciare link a loro sotto. Fino alla prossima volta!
