Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Animation
Code

Creare il carosello perfetto, Parte 2

by
Difficulty:AdvancedLength:MediumLanguages:
This post is part of a series called Create the Perfect Carousel.
Create the Perfect Carousel, Part 1
Create the Perfect Carousel, Part 3

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Bentornato alla serie di tutorial come Creare il carosello perfetto. Stiamo facendo un carosello accessibile e delizioso utilizzando JavaScript e la fisica di Popmotion, il tween e le capacità di tracciamento degli input .

Nella parte 1 del nostro tutorial, abbiamo dato un'occhiata a come Amazon e Netflix hanno creato i loro caroselli e abbiamo valutato i pro e i contro dei loro approcci. Con le nostre conoscenze, abbiamo deciso una strategia per il nostro carosello e reso effettivo lo scorrimento tramite il tocco usando la fisica.

Nella parte 2, implementeremo lo scorrimento orizzontale del mouse. Guarderemo anche alcune comuni tecniche di impaginazione e ne implementeremo una. Infine, collegheremo una barra di avanzamento che indicherà quanto l'utente è avanzato nel carosello.

Potete ripristinare il vostro punto di salvataggio aprendo questo CodePen, che riprende da dove abbiamo lasciato.

Scorrimento orizzontale del mouse

È raro che un carosello JavaScript rispetti lo scorrimento orizzontale del mouse. Questa è una vergogna: sui computer portatili e i mouse che implementano lo scorrimento orizzontale basato sulla quantità di moto, questo è di gran lunga il modo più veloce per navigare il carosello. È peggio di costringere gli utenti che usano il touch a navigare tramite pulsanti anziché passare il dito.

Per fortuna, può essere implementato in poche righe di codice. Alla fine della vostra funzione carousel, aggiungete un nuovo evento listener:

Sotto il vostro evento di startTouchScroll, aggiungete una funzione stub chiamata onWheel:

Ora, se scorrete la rotellina sopra il carosello e controllate il vostro pannello della console, vedrete la distanza della rotellina sull'output dell'asse x.

Come per il tocco, se il movimento della rotellina è principalmente verticale, la pagina dovrebbe scorrere come al solito. Se è orizzontale, vogliamo catturare il movimento della rotellina e applicarlo al carosello. Così, in onWheel, sostituite console.log con:

Questo blocco di codice fermerà lo scorrimento della pagina se lo scorrimento è orizzontale. Aggiornare il nostro offset x della barra di scorrimento ora è solo una questione di prendere la proprietà dell'evento deltaX e aggiungerla al nostro valore sliderX corrente:

Stiamo riutilizzando la nostra precedente funzione clampXOffset per avvolgere questo calcolo e assicurarci che il carosello non scorra oltre i suoi limiti misurati.

Una digressione sugli eventi di scorrimento in throttling

Qualsiasi buon tutorial che si occupa di eventi di input spiegherà quanto sia importante ridurre tali eventi. Questo perché gli eventi di scorrimento, mouse e touch possono tutti essere più veloci della frequenza di fotogrammi del dispositivo.

Non volete eseguire un inutile lavoro che necessiterà di notevoli risorse come restituire il carosello due volte in un solo fotogramma, poiché è uno spreco di risorse e un modo rapido per fare un'interfaccia che sembri lenta.

Questo tutorial non ha accennato a questo perché il renderer fornito da Popmotion implementa Framesync, un piccolo job scheduler di fotogramma sincronizzato. Questo significa che  potreste chiamare (v) => sliderRenderer.set ('x', v) più volte in una riga, e l'esecuzione dispendiosa accadrebbe solo una volta, al fotogramma successivo.

L'impaginazione

Lo scorrimento è finito. Ora abbiamo bisogno di dare un po' di vita ai finora poco amati pulsanti di navigazione.

Ora, questo tutorial è sull'interazione, quindi sentitevi liberi di progettare questi pulsanti come desiderate. Personalmente, trovo le frecce di direzione più intuitive (e completamente internazionalizzate di default!).

Come dovrebbe funzionare l'impaginazione?

Ci sono due strategie chiare, potremmo prendere quando impaginiamo il carosello, uno alla volta o il primo elemento oscurato. C'è solo una strategia corretta ma, perché ho visto l'altro implementato così spesso, ho pensato che sarebbe valsa la pena di spiegare perché non è corretto.

1. Uno alla volta

Item By Item Example

Basta misurate l'offset x dell'elemento successivo nell'elenco e animate la serie per tale importo. È un algoritmo molto semplice che presumo sia scelto per la sua semplicità piuttosto che la sua facilità di utilizzo.

Il problema è che la maggior parte degli schermi sarà in grado di mostrare un sacco di elementi in un momento, e le persone li analizzeranno tutti prima di provare a navigare.

Sembra fiacco, se non addirittura frustrante. L'unica situazione in cui questa sarebbe una buona scelta è se sapete che gli elementi nel vostro carosello sono della stessa larghezza o solo leggermente più piccoli dell'area visibile.

Tuttavia, se guardiamo più elementi, è meglio usare il metodo del primo elemento oscurato:

2. Primo elemento oscurato

The First Obscured Item

Questo metodo cerca semplicemente il primo elemento oscurato nella direzione in cui vogliamo spostare il carosello, prende il relativo offset x e poi scorre verso quello.

In tal modo, tiriamo il numero massimo di nuovi elementi lavorando sul presupposto che l'utente ha visto tutti quelli attualmente presenti.

Perché stiamo tirando più elementi, il carosello richiede meno clic per navigare. La navigazione più veloce aumenterà il coinvolgimento e garantirà che i vostri utenti vedranno un altro po' dei vostri prodotti.

Listener di eventi

In primo luogo, impostiamo il nostro listener di eventi in modo che possiamo iniziare a giocare con l'impaginazione.

Dobbiamo prima di selezionare i pulsanti precedente e successivo. Nella parte superiore della funzione carousel, aggiungete:

Quindi, nella parte inferiore della funzione carousel, aggiungete i listener di eventi:

Infine, appena sopra il vostro blocco di listener di eventi, è possibile aggiungere le funzioni aggiornate:

goto è la funzione che sta per gestire tutta la logica dell'impaginazione. Ci vuole semplicemente un numero che rappresenti la direzione di marcia che vogliamo impaginare. gotoNext e gotoPrev semplicemente chiamano questa funzione con 1 o -1, rispettivamente.

Calcolare una "pagina"

Un utente può scorrere liberamente questo carosello e ci sono n elementi all'interno di esso, e il carosello potrebbe essere ridimensionato. Così il concetto di una pagina tradizionale non è direttamente applicabile qui. Non conteremo il numero di pagine.

Invece, quando viene chiamata la funzione goto, stiamo andando a guardare in direzione di delta e troveremo il primo elemento parzialmente oscurato. Che diventerà il primo elemento sulla nostra "pagina" successiva.

Il primo passo è quello di ottenere l'offset x corrente della nostra barra di scorrimento e usarlo con la piena larghezza visibile della barra di scorrimento per calcolare un offset "ideale" al quale vorremmo scorrere. L'offset ideale è quello verso il quale scorreremo se fossimo stati sprovveduti rispetto al contenuto della barra di scorrimento. Esso fornisce un bel posto per noi per iniziare a cercare il nostro primo elemento.

Qui possiamo usare un'ottimizzazione sfacciata. Fornendo il nostro targetX alla funzione clampXOffset che abbiamo fatto nel tutorial precedente, possiamo vedere se il suo output è diverso da targetX. Se lo è, vuol dire che il nostro targetX è fuori i nostri limiti di scorrimento, quindi non abbiamo bisogno di scoprire l'elemento più vicino. Ci basta scorrere fino alla fine.

Trovare l'elemento più vicino

È importante notare che il codice riportato di seguito funziona sul presupposto che tutti gli elementi del vostro carosello sono della stessa dimensione. I base a tale ipotesi, possiamo fare delle ottimizzazioni come non dover misurare le dimensioni di ogni elemento. Se i vostri elementi sono di formati differenti, questo sarà ancora un buon punto di partenza.

Sopra la funzione goto, aggiungete la funzione di findClosestItemOffset a cui fa riferimento l'ultimo frammento di codice:

In primo luogo, abbiamo bisogno di sapere quanto larghi sono i nostri articoli e la spaziatura tra di loro. Il metodo Element.getBoundingClientRect() può fornire tutte le informazioni di cui che abbiamo bisogno. Per width, misuriamo semplicemente la prima voce dell'elemento. Per calcolare la spaziatura tra gli elementi, possiamo misurare l'offset right del primo elemento e l'offset left del secondo e quindi sottrarre il primo da quest'ultimo:

Ora, con le variabili targetX e delta, che passiamo alla funzione, abbiamo tutti i dati di cui abbiamo bisogno per calcolare rapidamente un offset verso cui fare lo scorrimento.

Il calcolo è quello di dividere il valore assoluto targetX per la width + spacing. Questo ci darà il numero esatto di elementi che possiamo inserire all'interno di quella distanza.

Poi, muovete verso l'alto o verso il basso a seconda della direzione dell'impaginazione (il nostro delta). Questo ci darà il numero di elementi completi che possiamo inserire.

Infine, moltiplicate quel numero per width + spacing per darci una catena di offset con un elemento completo.

Animare l'impaginazione

Ora che abbiamo calcolato il nostro targetX, possiamo animarlo! Per fare questo, utilizzeremo il cavallo di battaglia dell'animazione web, il tween.

Per chi non lo sapesse, "tween" è l'abbreviazione di between. Un tween cambia da un valore a altro, nel corso di un periodo di tempo prestabilito. Se avete utilizzato le transizioni CSS, questa è la stessa cosa.

Ci sono una serie di vantaggi (e difetti!) all'uso di JavaScript su CSS per i tween. In questo caso, perché noi stiamo anche animando sliderX con la fisica e gli input dell'utente, sarà più facile per noi stare in questo flusso di lavoro per il tween.

Significa anche che più tardi possiamo collegare una barra di avanzamento e funzionerà naturalmente con tutte le nostre animazioni, gratuitamente.

Vogliamo innanzitutto importare tween da Popmotion:

Alla fine della nostra funzione goto, possiamo aggiungere il nostro tween che anima da currentX a targetX:

Per impostazione predefinita, Popmotion imposta duration a 300 millisecondi e ease a easing.easeOut. Questi sono stati scelti appositamente per fornire una reattività alle animazioni che rispondono all'input dell'utente, ma sentitevi liberi di giocare e vedere se mettete insieme qualcosa che meglio si adatta all'immagine del vostro brand.

Indicatore di avanzamento

È utile per gli utenti avere qualche indicazione su dove sono nel carosello. Per questo, possiamo collegare un indicatore di avanzamento.

La vostra barra di avanzamento potrebbe essere proposta in un certo numero di modi. Per questo tutorial, abbiamo fatto un div colorato, alto 5px, che corre tra i pulsanti precedente e successivo. È il modo in cui lo abbiamo collegato al nostro codice e animato la barra che è importante ed è l'obiettivo di questa esercitazione.

Non avete ancora visto l'indicatore perché abbiamo originariamente disegnato con transform: scaleX(0). Usiamo una trasformazione scale per regolare la larghezza della barra perché, come abbiamo spiegato nella parte 1, le trasformazioni sono più performanti che modificare le proprietà come left o, in questo caso, width.

Inoltre ci permette di scrivere facilmente il codice che imposta la scala in percentuale: il valore corrente di sliderX tra minXOffset e maxXOffset.

Iniziamo selezionando il nostro div.progress-bar dopo il nostro selettore previousButton:

Dopo definiamo sliderRenderer, possiamo aggiungere un renderer per progressBar:

Ora definiamo una funzione per aggiornare la proprietà scaleX della barra di avanzamento.

Useremo una funzione calc chiamata getProgressFromValue. Questo richiede un intervallo, nel nostro caso min e maxXOffset e un terzo numero. Restituisce il progress, un numero compreso tra 0 e 1, di tale terzo numero all'interno dell'intervallo specificato.

Abbiamo scritto l'intervallo qui come maxXOffset, minXOffset quando, intuitivamente, dovrebbe essere invertito. Questo è perché x è un valore negativo, e maxXOffset è anche un valore negativo, mentre minXOffset è 0. Lo 0 è tecnicamente il più grande dei due numeri, ma il valore più piccolo in realtà rappresenta l'offset massimo. Negativo, eh?

Vogliamo che l'indicatore di avanzamento si aggiorni di par passo con sliderX, quindi cambiamo questa linea:

A questa riga:

Ora, ogni volta che sliderX si aggiorna, così farà la barra di avanzamento.

Conclusione

Questo è tutto per questa puntata! Potete prendere il codice più recente su questo CodePen. Abbiamo introdotto con successo lo scorrimento orizzontale con rotellina, l'impaginazione e una barra di avanzamento.

Il carosello è in condizioni abbastanza buone finora! Nella puntata finale, faremo un passo ulteriore. Faremo il carosello completamente accessibile da tastiera affinché chiunque possa utilizzarlo.

Aggiungeremo un paio di tocchi deliziosi utilizzando un tiro alimentato a molla quando un utente tenta di scorrere il carosello oltre i suoi limiti utilizzando touch scroll o l'impaginazione.

Allora ci vediamo!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.