În tutorialele anterioare ne-am uitat să folosim API-ul Behance pentru a conduce propria noastră pagină web, iar apoi, folosind LESS, am făcut totul uimitor. În aceste tutoriale vom îmbunătăți experiența vizitatorilor prin adăugarea unui efect lightbox și a unor animații CSS.
Căsuțele de lumină și efectele de animație
Multe site-uri de portofoliu utilizează astăzi o imagine lightbox de un fel pentru imaginile portofoliului lor. În acest tutorial, vom aplica același lucru pe site-ul nostru. Acoperirea imaginii se va mări atunci când utilizatorii dau clic pe ea, împreună cu celelalte imagini care apar în conținut, astfel încât utilizatorii să poată vedea fiecare imagine în ea mai strâns.
Iată instrumentele necesare pentru a realiza acest lucru:
Magnifică popup
Ne vom baza pe un plugin jQuery Lightbox numit Magnific Popup de Dmitry Semenov. Este ușoară în mărime, rapidă și receptivă - așa cum dorim.
Animate.css
Vom încorpora de asemenea animația CSS3 pentru a ajuta site-ul nostru să vină în viață. Vom adopta cateva fragmente din Animate.css, care ofera o colectie extraordinara de animatii CSS3 printr-o serie de clase drop-in pentru a aplica animatia imediat.
Integrarea pop-up-ului Magnific
Să începem prin adăugarea foii de stil Magnifică popup la cap etichetă.
Apoi, vom adăuga scripturile de jos în jos în jos în subsol, oferind paginii o șansă de redare înainte ca scenariile comportamentale să fie încărcate.
Apoi, va trebui să adăugăm un HTML5 date atribut, Date-proiect-id = " this.id" la figura element care acoperă imaginea de acoperire a portofoliului, după cum urmează.
... #în acest caz. [404] altceva #în cazul în care se înregistrează. [230] Else /dacă dacă ...
Reîmprospătați site-ul web și inspectați site-ul web prin intermediul Chrome DevTools sau Firebug. Ar trebui să găsiți Date-proiect-id conține numărul de identificare al portofoliului, după cum se vede mai jos.
ID-ul de date-proiect în element figura cu numărul de identificare
Vom folosi date atributului pentru a prelua conținutul portofoliului selectat cu acel cod atribuit ulterior.
Apoi, va trebui să modificăm aspectul cursorului la mareste, după cum urmează:
mareste cursorul va sugera că imaginea poate fi mărită; utilizatorul trebuie să se aștepte ca aceștia să poată da clic pe imagine. Însă mareste nu este încă acceptată în nicio versiune de Internet Explorer, conform MDN. Din acest motiv am specificat și cursorul ac indicator inainte de cursor: zoom-in ca rezervă pentru Internet Explorer, precum și pentru celelalte browsere care ar putea să nu o suporte.
Efectuarea funcționării
Acum, vom adăuga scriptul pentru a inițializa Popup Magnific. Deoarece planul nu este doar de a arăta imaginea de acoperire a portofoliului, ci și de a aduce celelalte imagini în conținut, scriptul ar putea părea un pic mai grav. Deci, aici vom adăuga scriptul secvențial. Primul lucru pe care îl vom scrie este jQuery .pe ( „clic“) metodă. Vom executa numai opțiunea Magnific Popup când utilizatorul face clic pe imaginea de pe copertă.
$ ('portofoliu') pe ('click', '.portfolio-cover', function () // restul scriptului merge aici ...
Apoi vom defini urmatoarele variabile:
$ this, această variabilă se referă la obiectul legat de .pe() metodă.
projectID va conține $ This.data ( 'proiect-id') care prinde acel număr de identificare din Date-proiect-id atribut. Vom folosi acest ID pentru a prelua conținutul prin API-ul Behance.
beProjectContentAPI va conține punctele finale API Behance pentru a prelua conținutul proiectului Behance.
KeyName, această variabilă formează numele cheii pe care o vom folosi pentru stocarea datelor preluate de la Behance în localStorage. Formatul numelui va fi behanceProjectImages- urmat de numărul ID al proiectului. Contrar a ceea ce am făcut anterior, acum folosim localStorage pentru a stoca datele în loc să folosim sessionStorage. Motivul este că presupunem că utilizatorii Behance ar actualiza rareori conținutul după ce au fost publicate. Deci, în acest caz, este mai bine să folosim localStorage, deoarece stochează datele în mod persistent; datele vor rămâne în browser, atâta timp cât nu o ștergem în mod intenționat.
Apoi vom crea funcția principală care va executa fereastra Maginific Popup. Vom numi această funcție showGallery (). De asemenea, vom aplica următoarele opțiuni în fereastra Magnifică:
articole; articole sunt foarte importante aici. Aceasta va conține lista de imagini care vor fi afișate în caseta Lightbox.
Galerie; când activați galeria, opțiunea Magnific Popup va adăuga săgeți pentru a naviga prin fiecare imagine din aceasta.
tip; vom folosi imaginea pentru singurul tip de conținut permis în caseta Lightbox.
Această ultimă piesă este inevitabilă; va trebui să adăugăm .magnificPopup ( 'deschis') așa că deschide caseta Lightbox imediat după inițializare.
Vom executa numai showGallery () sub anumite conditii; dacă datele pentru portofoliul selectat sunt disponibile în localStorage, accesați-l și executați showGallery (), altfel obțineți datele din API cu $ .GetJSON () mai întâi, apoi executați showGallery () și stocați datele în localStorage pentru utilizare ulterioară. Așa cum am făcut anterior, trebuie să folosim JSON.stringify () pentru a converti datele într-un șir astfel încât acestea să poată fi salvate în localStorage, atunci vom folosi JSON.parse () pentru a formata datele în JSON.
Verificarea imaginilor
Lucrul pe care trebuie să-l menționăm aici este că conținutul extras din API ar putea fi video, video încorporat sau text, care nu sunt permise; acceptăm tipul de conținut imagine. Astfel, înainte de a posta datele la localStorage, trebuie să adăugăm următoarea bucată de cod pentru a filtra conținutul.
var src = []; $ .each (projectContent.project.modules, funcția (index, mod) if (mod.src! = undefined) src.push (src: mod.src););
Iată întregul scenariu, la final.
$ (this), projectID = $ this.data ('project-id'), beProjectContentAPI = $ ('portofoliu'). "http://www.behance.net/v2/projects/'+ projectID + '? callback =? & api_key =' + apiKey, keyName = 'behanceProjectImages-' + projectID; funcția showGallery (dataSource) $ this.magnificPopup item: dataSource, galerie: enabled: true, tip: 'imagine')) magnificPopup ('open'); (altceva)) else ($) .getJSON (beProjectContentAPI, function (projectContent) var src = []; $ each (projectContent.project.modules, function (index, mod) if (src); src.push (src: mod.src);); showGallery (src); var data = JSON.stringify (src); localStorage.setItem ;;
Acum, atunci când faceți clic pe imagine, ar trebui să măriți imaginea și să fie afișată în modul Lightbox:
Dacă inspectați site-ul cu Chrome DevTools, acum ar trebui să găsiți conținutul stocat în localStorage.
În plus, puteți naviga prin toate imaginile din conținut utilizând săgețile. Dar tranziția se simte în prezent destul de ciudat (nu?); acesta sare de la o imagine la alta instantaneu. Deci, haideți să o facem mai liniștită și mai comunicativă cu o anumită animație, să o facem noi?
Integrarea Animate.css
Mai întâi de toate, va trebui să adăugăm mainClass: "animat" și Îndepărtare: 350 la funcția magnificPopup.
În acest cod, am adăugat o nouă clasă numită animat în caseta Lightbox. animat clasa este clasa folosită în animate.css pentru a desemna animația pentru un element. Această clasă ar fi, de asemenea, utilă pentru a activa sau a dezactiva animația după cum doriți; dacă doriți să îl dezactivați, pur și simplu eliminați mainClass: "animat", linia.
Am adăugat, de asemenea removalDelay, care specifică durata înainte ca Cutia Lightbox să fie eliminată complet din DOM. Întârzierea de aici va da animației un timp de vizibilitate.
Adaptarea stilurilor de cadre cheie
Apoi, vom adopta câteva Cframe CSS, Transformări și tranziții care formează efectul de animație în Animate.css. Le vom converti în format LESS folosind LESSHat.
Am adăugat mai multe nume cheie fadeInRight, fadeInLeft, fadeOutRight, fadeOutLeft, fadeInDown, și fadeOutDown care au fost traduse în format LESS cu LESSHat .keyframes () Mixins.
Există mai multe părți din Lightbox pe care le vom anima, și anume: suprapunerea de fundal care acoperă întreaga fereastră de vizualizare, conținutul sau imaginea Lightbox și săgețile de navigare.
Animația de fundal suprapusă este destul de simplă. Nu va avea nevoie de acele cadre cheie de mai sus, la toate acestea, va fi pur și simplu decolorată când Lightbox-ul va apărea și va dispărea când va dispărea. Iată toate regulile de stil pentru a obține acea animație.
În fereastra Magnifică, fondul suprapus are o clasă numită bg-mfp. În acest cod, am stabilit opacitatea lui 0 astfel încât acesta va fi inițial invizibil și, de asemenea, va stabili durata de tranziție pentru opacitate proprietate.
În plus, Magnific Popup va produce un set de noi clase pentru direcționarea diferitelor state; de exemplu, atunci când este afișată pe deplin caseta Lightbox, se va adăuga gata-mfp clasă. În această stare, am setat opacitatea la 0,8. După cum am stabilit tranziția, ne va da efectul de animație; opacitatea va transmite de la 0 la 0,8 în 350 ms.
Apoi atunci când Lightbox dispare, Magnific Popup va ieși mfp eliminare clasă. În această stare, ne-am întors opacitatea 0, făcând fundalul suprapus invizibil din nou.
Mai jos sunt regulile de stil care animă conținutul Lightbox.
La fel ca fundalul suprapus, stabilim și durata de tranziție pentru conținut la 350MS. Aplicăm de asemenea Cadrele cheie cu .animație nume () Mixins. Aici am setat conținutul să se estompeze și în același timp să alunece când apare, apoi să alunece și să se estompeze atunci când dispare.
Animând săgețile de navigare
În cele din urmă, vom adăuga animația pentru săgețile noastre din caseta Lightbox.
Codul de aici este destul de similar cu fragmentul care animă conținutul. Aici săgeata din stânga se va estompa și va aluneca din dreapta atunci când se va afișa, apoi va aluneca spre stânga și va dispărea când va dispărea Săgeata dreapta va face pur și simplu opusul.
Concluzie
A fost o serie de tutori foarte lungi! Am construit cu succes succesul unui portofoliu de portofoliu personalizat, cu ajutorul API-ului Behance ca sursă de date. Pentru a construi site-ul nostru, am folosit și o serie de instrumente moderne, cum ar fi LESS, HandlebarsJS și Animate.css. Este destul de ușor de implementat site-ul, deoarece este doar un HTML static - de fapt, demo-ul nostru este găzduit ca o pagină statică GitHub. Alternativ, îl puteți încărca utilizând FTP pe un server web.
Dacă doriți să continuați acest proiect, puteți adăuga, de exemplu, un "filtru" care va sorta portofoliul în funcție de domeniul său creativ. Puteți adăuga, de asemenea, efecte de hover frumos. În orice caz, sper că ți-a plăcut seria și ai învățat câteva trucuri pe care le poți adopta pe site-ul tău.
Share
altceva #în cazul în care se înregistrează. [230]
Else
/dacă dacă
ID-ul de date-proiect în element figura cu numărul de identificare 
Accentsconagua
altceva #în cazul în care se înregistrează. [230] 
Else 
/dacă dacă 
