Designul de umbre lungă este o variantă a designului plat, la care se adaugă umbrele, creând iluzia adâncimii și rezultând un design care arată tridimensional. În acest tutorial vom crea un plugin jQuery care ne va permite să transformăm cu ușurință o pictogramă plat prin adăugarea unei pictograme umbrite lungi complet personalizabile.

Dacă sunteți interesat de un plugin complet jQuery pentru a adăuga umbre lungi la pictograme și text, verificați pluginul jQuery Long Shadow de pe CodeCanyon.

În acest tutorial vom arunca o privire asupra elementelor de design al umbrei lungi și vom crea un plugin simplu jQuery care ne va permite să controlam aceste elemente. 

Să începem!

Care sunt elementele designului de umbre lungi??

Să distrugem elementele care alcătuiesc un design cu umbre lungi. Putem observa că avem:

• Elementul principal sau elementul care aruncă umbra.
• Lungimea umbrei, de obicei foarte lungă și, prin urmare, dă numele efectului. Lungimea umbrei dă și iluzia că elementul principal are adâncime.
• Direcția sau unghiul umbrei. În lumea reală, acest lucru este determinat de poziția sursei de lumină. De regulă, toate umbrele aruncate de o sursă de lumină au aceeași direcție.
• Culoarea umbrei și opacitatea. Culoarea sursei de lumină afectează culoarea umbrelor. De asemenea, cu cât este mai puternică sursa de lumină, cu atât mai întunecate și mai clare sunt umbrele.

Aceste elemente, create împreună, creează iluzia că elementul principal nu este plat, ci de fapt un obiect 3D care aruncă o umbră.

Acum, să creăm pluginul jQuery care ne-ar permite să controlam aceste elemente.

Crearea pluginului jQuery Long Shadows

Pentru a crea pluginul jQuery long shadows, vom configura o structură bazată pe plugin-ul jQuery ca aceasta:

• Creați un dosar pentru a ține fișierele proiectului. Să numim acest dosar umbre lungi-jquery-plugin.
• În interiorul directorului de proiect, creați un fișier și formați-l index.html. Acesta va conține codul nostru HTML.
• Creați un fișier, sunați-l jquery.longshadows.js, și plasați-o în dosar. Acesta va conține codul JavaScript pentru pluginul nostru jQuery.
• Pentru a păstra lucrurile separate, vom crea și un alt fișier JavaScript în acest dosar și îl vom numi script.js. Acest lucru va face uz de pluginul jQuery pe care tocmai îl creăm.
• În directorul proiectului, plasați și images_4 / crearea-a-jQuery-plugin-pentru-lung umbra-design_4.png pictograma pe care o puteți găsi în atașamentele pentru acest tutorial.

Al nostru index.html va conține o structură de bază HTML și va include, de asemenea, jQuery și fișierele noastre JavaScript. Trebuie să includeți biblioteca jQuery deoarece vom implementa un plugin jQuery. index.html fișierul ar trebui să arate astfel:

 jquery.longshadows.js fișierul va conține codul plugin jQuery și îl vom implementa astfel:

(funcția ($) $ .fn.longshadows = funcție (opțiuni) var settings = $ .extend (// opțiuni implicite du-te aici ..., opțiuni); fiecare (funcția () // codul pluginului vine aici ...);) (jQuery);

Vom numi pluginul din script.js fişier. Pentru acest tutorial, vom implementa parametrii menționați în capitolul precedent:

• shadowColor: Culoarea umbrei pe care ne-o aruncă elementul.
• shadowLength: Lungimea umbrei aruncate.
  
• shadowAngle: Unghiul umbrei.
  
• shadowOpacity: Cât de opacă sau transparentă este umbra.
  
• spaţierea: Acesta este un atribut pe care nu l-am menționat în secțiunea anterioară. Cu toate acestea, avem nevoie de acest lucru pentru a permite extinderea spațiului în jurul elementului pentru care creăm umbrele lungi. În acest fel, efectul va fi mai vizibil.
  

Să începem implementarea. Pentru a crea umbra lungă, vom folosi componenta canvas HTML5. Putem crea o pânză în memorie pe care vom desena o copie a elementului original de imagine și a umbrei acestuia. Pentru a desena umbra, vom desena doar o copie a elementului imagine una peste alta, cu o usoara decalare.

Numărul de copii și de ofset sunt calculate folosind o transformare simplă a coordonatelor polare bazată pe shadowLength și shadowAngle parametrii. De asemenea, va trebui să colorăm aceste copii în funcție de culoarea umbrei setată de shadowColor parametru. 

Pentru că tragem umbra ca mai multe imagini una peste alta, le vom desena în ordine inversă, din spate în față, începând cu bucata din umbra cea mai îndepărtată de elementul de imagine. Apoi trebuie să setăm opacitatea umbrei rezultate prin intermediul shadowOpacity parametru.

După desenarea umbrei, pur și simplu vom desena imaginea originală.

Să vedem cum se traduce acest lucru în cod în jquery.longshadows.js fişier:

(funcția ($) $ .fn.longshadows = funcție (opțiuni) var setări = $ .extend (shadowColor: "negru", shadowLength: 100, shadowAngle: 45, shadowOpacity: ; return this.each (funcția () var img = aceasta; img.onload = funcția () var self = vară canvas = document.createElement ("canvas"); var ctx = canvas.getContext ); canvas.width = auto.width + settings.spacing; canvas.height = auto.height + setări.spație; pentru (var r = set.shadowLength; r> = 1; r--) var x = (r * Math.cos (set.shadowAngle * Math.PI / 180)); var y = Math.round (r * Math.sin (set.shadowAngle * Math.PI / 180)); ctx.save ; ctx.translate (x + settings.spacing / 2; y + settings.spacing / 2); ctx.drawImage (auto, 0, 0); ctx.globalCompositeOperation = 'sursa-in'; ctx.fillStyle = settings.shadowColor ; ctx.rec (0, 0, canvas.width, canvas.height); ctx.fill (); ctx.restore (); var tempCanvas = copyCanvas (canvas, settings.shadowOpacity / 100.0); , 0, panza. lățime, canvas.height); ctx.drawImage (tempCanvas, 0, 0); ctx.drawImage (auto, setări.spație / 2, setări.spație / 2); self.onload = null; $ (auto) .attr ("src", canvas.toDataURL ("imagine / png")); ; img.src = img.src; ); ; ) (JQuery); funcția copyCanvas (panza, opacitate) var canvasDest = document.createElement ("canvas"); canvasDest.width = canvas.width; canvasDest.height = canvas.height; canvasDest.getContext ("2d") globalAlpha = opacitate; canvasDest.getContext ("2d"). drawImage (canvas, 0, 0); întoarcere canvasDest; 

Pluginul este configurabil prin trimiterea parametrilor prin Opțiuni parametru. Acești parametri vor fi uniți cu valorile implicite și stocați în setări variabil. Acest lucru ne permite să folosim rapid plugin-ul dacă dorim, fără a fi supuși unor parametri.

 img variabila va menține o referință la elementul original de imagine pe care aplicăm efectul. Trebuie să intrăm în onload eveniment al imaginii pentru a vă asigura că imaginea este complet încărcată atunci când efectul este aplicat. De asemenea, veți observa că după onload funcția pe care o avem img.src = img.src;. Aceasta va declanșa onload , deoarece nu suntem siguri de ordinea în care browserul încarcă imaginea și scriptul.

În interiorul onload handler, vom crea memoria în memorie pânză element pe care vom extrage rezultatul final, cu aceeași dimensiune ca și imaginea plus spaţierea. Apoi, pornind de la cel mai îndepărtat punct spre centru, tragem copiile imaginii pe panza folosind transformarea coordonatelor polare pentru decalarea imaginii trasate:

var x = Math.round (r * Math.cos (setareshadowAngle * Math.PI / 180)); var y = Math.round (r * Math.sin (set.shadowAngle * Math.PI / 180));

Pentru a desena imaginea de pe panza, folosim contextul 2D din panza și sunăm drawImage () funcţie. Aceasta va desena o copie a imaginii pe panza, dar ceea ce avem nevoie este o versiune colorata a acesteia. Pentru a face acest lucru, vom folosi operațiunile de compozitare a pânzei. În cazul nostru, folosind sursă în împreună cu un dreptunghi colorat cu shadowColor va duce la o imagine cu aceeași formă ca imaginea originală, dar cu culoarea setată la shadowColor. 

Rețineți că dacă aveți o imagine cu mai multe culori, rezultatul va fi în aceeași culoare, după cum este indicat shadowColor, ceea ce este corect în cazul nostru pentru că desenăm o umbră, iar umbra este de obicei aceeași culoare.

 pentru buclă are grijă să atragă umbra; totuși, este tras la opacitate totală. Am dori să putem seta opacitatea umbrei folosind shadowOpacity parametru. Pentru a face acest lucru, folosim copyCanvas () care utilizează o pânză temporară și stabilește opacitatea conținutului panzei la valoarea specificată.

Trebuie să facem acest lucru la sfârșit, când a fost desenată întreaga umbră, altfel stivuirea imaginilor transparente unul peste celălalt ar duce la un efect de gradient.

Să aruncăm o privire la ultimele două linii din onload handler:

self.onload = null; $ (auto) .attr ("src", canvas.toDataURL ("imagine / png"));

Prima linie elimină onload handler din imagine. Facem acest lucru pentru că în următoarea linie dorim să setăm imaginea desenată pe pânză ca pe cea nouă src pentru imaginea originală. Dacă nu l-am îndepărta pe mâner, atunci am fi ajuns într-o buclă infinită.

Cum folosim pluginul jQuery Long Shadows?

Acum, când am implementat pluginul, să vedem cum îl putem folosi și ce rezultat produce. Pentru aceasta vom folosi script.js fișier, unde vom apela pluginul pe care tocmai l-am creat.

Cea mai simplă modalitate de a apela plugin-ul este:

$ (document) .ready (funcția () $ ("# logo") longshadows (););

Aceasta instruiește browserul că atunci când pagina termină încărcarea, ar trebui să aplice longshadows plugin pentru elementul cu ID-ul siglă.

Apelarea pluginului ca acesta va face uz de parametrii impliciți. Deoarece rezultatul nu arată prea mare cu acești parametri impliciți, să vedem cum putem schimba acest lucru. Să numim pluginul în felul următor:

$ (document) .ready (functie () $ ("# logo").

Ceea ce are ca rezultat o imagine ca aceasta:

Deoarece acest plugin este configurabil și poate fi aplicat oricărei imagini, mai multor imagini și cu combinații nelimitate de valori ale parametrilor, imaginația este singura dvs. limită. Dacă modificăm codul HTML înăuntru index.html asa:

         
 
Long Shadows jQuery Plugin
 
Designul cu umbre lungă este o variantă a designului plat, la care se adaugă umbrele, creând iluzia adâncimii și rezultând un design care arată tridimensional.
 
   

Mai mult, dacă sunăm pluginul de la script.js cu acești parametri:

$ (document) .ready (funcția () $ ("img") longshadows (spațiere: 150, shadowOpacity: 20, shadowAngle: 160, shadowLength: 400, shadowColor: '# 330000');

Avem acest rezultat, care este perfect pentru un design antet de site:

De asemenea, alte exemple care utilizează imagini diferite:

         
 
tuts+
 
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure dolor în republicarea în voluptate comandă esse cillum dolore eu fugiat nulla pariatur. Cu excepția cazului în care nu există un prozident, sunt în culpa qui officia deserted molit anim id est laborum.
 
   

Pentru aceasta, facem uz de images_4 / crearea-a-jQuery-plugin-pentru-lung umbra-design_6.png imagine pe care o puteți descărca din atașamente. Rețineți că putem să îmbinăm pluginul cu stilurile CSS, în acest exemplu adăugând dreptunghiul de culoare în jurul pictogramei.

Felicitări

Aveți acum elementele de bază pentru crearea unui plugin jQuery care adaugă umbre lungi la pictogramele dvs. Aveți posibilitatea să construiți pe partea de sus a acestui plugin și să faceți ca acesta să funcționeze pentru text, de exemplu, sau pentru a combina mai multe imagini și efecte de umbră.

Dacă sunteți interesat de un plugin complet de umbre lungi cu mai multe opțiuni de configurare, verificați acest element CodeCanyon: Pluginul Shadow Long Shadow.