Costruire un menu Off-Canvas trascinabile con GreenSock

Da una vista a volo d'uccello il markup è semantico, senza l'obbligo di div per hackerare il layout e la posizione del menu; in definitiva rendendo questo markup portatile, riutilizzabile e persino estendibile.

Come funziona trascinabile

Trascinabile consente a qualsiasi elemento di essere "trascinabile" verticalmente e orizzontalmente, in base alle istruzioni personalizzate definite.

Analogamente a qualsiasi libreria JavaScript, dovremo caricare gli script prima di entrare in qualsiasi codice o configurazione personalizzata.

Utilizziamo TweenMax, quindi lo carichiamo per primi. Tuttavia, quando si tratta di un ordine di caricamento degli script, gli autori non dovrebbero preoccuparsi di una catena di dipendenze. Ciò significa che è possibile caricare TweenMax e quindi Draggable o viceversa. Draggable ti darà ora il potere di scrivere codice che consente ai tuoi elementi di scelta di scorrere, scorrere, ruotare e persino trascinare!

L'installazione trascinabile

Con gli script definiti e caricati è ora di scrivere del codice. Per Draggable definiremo a costruttore come il punto di partenza iniziale in questo viaggio. La sintassi per il costruttore ti consente di passare a bersaglio e serie di opzioni.

Trascinabile (destinazione: oggetto, vars: oggetto) 

Invece di utilizzare il costruttore sopra, potresti trovare la seguente opzione un po 'più flessibile:

Draggable.create ([obj1, obj2], option1: value1, option2: value2) 

In genere è meglio usarlo Draggable.create () invece del costruttore, perché può ospitare più elementi con una sola chiamata.

Draggable.create (target, opzioni) 

L'argomento indicato come bersaglio perché il metodo create fa riferimento all'elemento che dovrebbe essere trascinabile; che si tratti di un elemento DOM regolare, di un oggetto jQuery o di un array di elementi come abbiamo visto in precedenza. Il opzioni argomento ci consente di passare un oggetto letterale che contiene coppie chiave / valore con una moltitudine di opzioni fornite dall'API. Per un elenco completo delle opzioni, fare riferimento alla documentazione ufficiale di GreenSock.

Test Draggable

Sapere come eseguire il debug degli eventi trascinabili (se le cose vanno storte) può essere estremamente prezioso prima di iniziare qualsiasi progetto, ma non sentirsi sopraffatti cercando di apprendere ogni singola opzione sotto le stelle; familiarizzare con le basi e lavorare da lì.

var container = document.querySelectorAll ('. container') [0]; 

Prenderemo il nostro contenitore usando il document.querySelectorAll metodo fornito fuori dalla scatola dal nostro amico JavaScript. Nota che stiamo ancora usando il markup che ho scritto all'inizio di questo tutorial.

Draggable.create ([container], ); 

Aggiungeremo la nostra variabile contenitore all'interno di un array ([]) e infine passare in un oggetto vuoto in cui verranno definite le opzioni a scopo di debug.

Draggable.create ([container], onDrag: function () , onDragStart: function () , onDragEnd: function () ); 

Ho aggiunto tre righe all'interno dell'oggetto letterale che contengono gli eventi a cui reagiremo. Nello specifico, utilizzeremo questi tre eventi di trascinamento per verificare quando e come l'evento risponde.

var container = document.querySelectorAll ('. container') [0]; funzione kennyLogger (evento) console.log (event.type + "+ 'fired'); Draggable.create ([container], onDrag: function (evento) kennyLogger (event); // fires 'mousemove' per dispositivi non tattili, onDragStart: funzione (evento) kennyLogger (evento);, onDragEnd: funzione (evento) kennyLogger (evento);); 

Ciò che accade in queste funzioni dipende da voi, ma per ora aggiungerò una funzione di registrazione della console che ci dirà qualcosa sugli eventi in corso. Lo chiamo il registratore di eventi "kennyLogger".

Passando Opzioni

Ora che abbiamo eseguito test, possiamo passare più opzioni per mettere a punto l'evento drag.

Draggable.create (container, throwProps: true, dragResistance: 0.25, edgeResistance: 1, throwResistance: 1000); 

Questi valori predefiniti sono ben spiegati nella documentazione di GreenSock. Potresti aver notato il throwProps tasto impostato su vero. Questo perché nel nostro prossimo e ultimo tutorial useremo il throwPropsPlugin per controllare lo slancio del menu fuori quadro quando si apre e si chiude. Poiché throwPropsPlugin è un vantaggio per i membri di GreenSock, puoi utilizzare questo URL utilizzabile solo tramite CodePen come menzionato all'inizio di questo tutorial.

Demo Time

Inizia includendo tutti i nostri script che includono throwPropsPlugin, Draggable e TweenMax (ricorda: l'ordine non è importante!).

Ricorda che stiamo caricando Draggable, TweenMax e throwPropPlugin. Applicando quelli al nostro markup originale e usando le linee per il debug, possiamo finalmente spostare il container con il nostro mouse o il dito su dispositivi abilitati al tocco!

Sentiti libero di sperimentare diversi valori e opzioni. Questa demo è pensata per essere un campo da gioco, non il prodotto finale, quindi impazzisci e rompi le cose, quindi risolvile!

Conclusione

Se desideri andare oltre con altre utility oltre a Draggable puoi consultare il sito Web di GreenSock per ulteriori informazioni. Suggerisco di dare un'occhiata a SplitText per un tocco tipografico serio.

Vieni a prenderti la prossima volta per l'ultimo e ultimo tutorial di questa serie, in cui riassumiamo il menu fuori campo!