Construirea unui meniu Draggable Off-Canvas cu GreenSock

Din punctul de vedere al păsărilor, marcajul este semantic, fără cerința divs pentru hacking aspectul și poziția meniului; transformând în final această marcare portabilă, reutilizabilă și chiar extensibilă.

Cum funcționează Draggable

Draggable permite ca orice element să fie "trasabil" vertical și orizontal, pe baza unor instrucțiuni personalizate definite.

Similar cu orice bibliotecă JavaScript, va trebui să încărcați scripturi înainte de a intra în orice cod sau configurații personalizate.

Folosim TweenMax, așa că mai întâi încărcați asta. Cu toate acestea, atunci când vine vorba de ordinea de încărcare a script-urilor, autorii nu ar trebui să fie preocupați de un lanț de dependență. Aceasta înseamnă că puteți încărca TweenMax și apoi Draggable sau invers. Draggable vă va da acum puterea de a scrie codul care permite elementelor dvs. de alegere să scurgă, să ghideze, să se rotească și chiar să tragă!

Setarea configurabilă

Cu script-urile definite și încărcate e timpul să scriem un cod. Pentru Draggable vom defini a constructor ca punct de plecare inițial în această călătorie. Sintaxa pentru constructor vă permite să treceți a ţintă și serie de Opțiuni.

Draggable (țintă: Obiect, vars: Obiect) 

În loc să utilizați constructorul de mai sus, puteți găsi următoarea opțiune un pic mai flexibil:

Draggable.create ([obj1, obj2], opțiunea1: valoarea1, opțiunea2: valoarea2) 

În mod normal, este mai bine să le folosiți Draggable.create () în loc de constructor, deoarece poate găzdui mai multe elemente cu un singur apel.

Draggable.create (țintă, opțiuni) 

Argumentul la care se face referire ca ţintă pentru metoda de creare se face referire la elementul care ar trebui să fie draggable; fie un element DOM obișnuit, un obiect jQuery sau o serie de elemente așa cum am văzut anterior. Opțiuni argument ne permite să trecem într-un literal obiect care conține perechi cheie / valoare cu o multitudine de opțiuni furnizate de API. Pentru o listă completă a opțiunilor, consultați documentația oficială GreenSock.

Testarea trasabilă

Cunoașterea modului de depanare a evenimentelor Draggable (în cazul în care lucrurile merg departe) poate fi extrem de valoroasă înainte de a începe orice proiect, dar nu vă simțiți copleșiți de încercarea de a învăța fiecare opțiune sub stele; familiarizați-vă folosind elementele de bază și lucrați de acolo.

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

O să luăm containerul folosind document.querySelectorAll metoda furnizată din cutie de către amicul nostru JavaScript. Rețineți că încă folosim marcajul pe care l-am scris la începutul acestui tutorial.

Draggable.create ([container], ); 

Vom adăuga variabila noastră container într-o matrice ([]) și, în final, treceți într-un obiect gol unde vor fi definite opțiunile pentru depanare.

Draggable.create ([container], onDrag: funcția () , onDragStart: funcția () , onDragEnd: funcția () ); 

Am adăugat trei linii în interiorul literalului obiect care conține evenimente la care vom reacționa. În mod specific, vom folosi aceste trei evenimente de tragere pentru a testa momentul și modul în care evenimentul răspunde.

var container = document.querySelectorAll ("container") [0]; funcția kennyLogger (eveniment) console.log (event.type + "+" trasată); Draggable.create ([container], onDrag: function (event) kennyLogger dispozitive non-touch, onDragStart: funcție (eveniment) kennyLogger (eveniment);, onDragEnd: funcție (eveniment) kennyLogger (eveniment);); 

Ceea ce intră în aceste funcții depinde de dvs., dar pentru moment voi adăuga o funcție de înregistrare a consolei care ne va spune puțin despre evenimentele care au loc. Eu îl numesc loggerul evenimentelor "kennyLogger".

Opțiunile de trecere

Acum, că am testat în loc, putem trece mai multe opțiuni pentru a regla fin trage eveniment.

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

Aceste valori implicite sunt bine explicate în documentația GreenSock. S-ar putea să fi observat throwProps cheie setat la Adevărat. Acest lucru se datorează faptului că în următorul nostru și ultimul tutorial vom folosi throwPropsPlugin pentru controlul momentului meniului off-panza în momentul în care se deschide și se închide. Deoarece throwPropsPlugin este un beneficiu al GreenSock-ului, puteți utiliza această adresă URL utilizabilă numai prin CodePen așa cum este menționat la începutul acestui tutorial.

Timp demonstrativ

Începeți prin includerea tuturor script-urilor noastre care includ throwPropsPlugin, Draggable și TweenMax (amintiți-vă: nu contează!).

Rețineți că încărcăm Draggable, TweenMax și throwPropPlugin. Dacă le aplicăm marcajului original și folosind liniile pentru depanare, putem muta în final containerul cu mouse-ul sau cu degetul pe dispozitivele cu atingere!

Simțiți-vă liber să experimentați diferite valori și opțiuni. Acest demo este menit să fie un loc de joacă, nu produsul final, așa că du-te și nu face nimic, apoi rezolva-l!

Concluzie

Dacă doriți să mergeți mai departe cu alte utilități pe lângă Draggable puteți verifica site-ul GreenSock pentru mai multe informații. Vă sugerez să aruncați o privire la SplitText pentru un fler tipografic grav.

Prindeți data viitoare pentru ultimul și ultimul tutorial al acestei serii, în care vom încheia meniul în afara canvasului!