I tidligere opplæringsprogrammer har vi sett på bruk av Behance API for å kjøre vår egen nettside, og deretter, ved å bruke LESS, gjorde vi at alt ser ut presentabel. I denne opplæringen skal vi forbedre opplevelsen for besøkende ved å legge til en lightbox-effekt og noen CSS-animasjoner.
Lys og animasjonseffekter
Mange porteføljesider bruker i dag en lysboks av noe slag for deres porteføljebilder. I denne opplæringen vil vi søke det samme på vår nettside. Bildedekselet vil zoome inn når brukerne klikker på det, sammen med de andre bildene som er i innholdet, slik at brukerne vil kunne se hvert bilde nærmere.
Her er verktøyene vi trenger for å oppnå dette:
Magnific Popup
Vi kommer til å stole på et jQuery Lightbox-plugin kalt Magnific Popup av Dmitry Semenov. Den er lett i størrelse, rask og responsiv - akkurat slik vi ønsker det.
Animate.css
Vi vil også inkludere CSS3 animasjon for å hjelpe nettstedet vårt til å bli levende. Vi vil vedta noen få utdrag fra Animate.css, som gir en enorm samling av CSS3-animasjon gjennom en rekke drop-in klasser for å bruke animasjonen umiddelbart.
Integrerende Magnif Popup
La oss begynne med å legge til Magnific Popup-stilarket til hode stikkord.
Da legger vi til skriptene lavere ned på siden i bunnteksten, noe som gir siden sjansen til å gjøre før adferdsskriptene er lastet inn.
Da må vi legge til en HTML5 data Egenskap, data-prosjekt-id = "this.id" til figur element som bryter porteføljedekselbildet, som følger.
... #if this.covers. [404] else #if this.covers. [230] ellers / if / if ...
Oppdater nettsiden og inspiser nettstedet via Chrome DevTools eller Firebug. Du bør finne data-prosjekt-id inneholder ID-nummeret til porteføljen, som vist nedenfor.
Dataprojekt-ID i figurelement med ID-nummer
Vi vil bruke data Tilordne å hente innholdet i den valgte porteføljen med den IDen som senere er tildelt.
Etter det må vi også endre markørens utseende til zoom inn, som følger:
De zoom inn markøren vil foreslå at bildet er zoom-stand; brukeren bør forvente at de kan klikke på bildet. Imidlertid zoom inn verdien støttes ikke i noen versjon av Internet Explorer, ifølge MDN. Derfor har vi også angitt markøren til pekeren i forkant av markør: zoome inn som fallback for Internet Explorer, så vel som de andre nettleserne som kanskje ikke støtter den.
Gjør det til å fungere
Nå vil vi legge til skriptet for å initialisere Magnific Popup. Siden planen ikke bare viser porteføljedekselbildet, men også tar med de andre bildene i innholdet, kan skriptet se litt heftig ut. Så her vil vi legge til skriptet i rekkefølge. Det første vi skal skrive er jQuery .ved trykk') metode. Vi utfører kun Magnific Popup når brukeren klikker på omslaget.
$ ('# portefølje'). på ('klikk', '.portfolio-cover', funksjon () // resten av scriptet går her ...
Da vil vi definere følgende variabler:
$ dette, denne variabelen refererer til objektet som er bundet til .på() metode.
projectID vil inneholde $ This.data ( 'prosjekt-id') som tar det ID nummeret fra data-prosjekt-id Egenskap. Vi bruker denne IDen til å hente innholdet gjennom Behance API.
beProjectContentAPI vil inneholde Behance API-endepunktene for å hente Behance-prosjektets innhold.
KeyName, Denne variabelen danner nøkkelnavnet som vi skal bruke for lagring av data hentet fra Behance i localStorage. Navnet formatet vil være behanceProjectImages- deretter etterfulgt av prosjekt ID-nummer. I motsetning til hva vi tidligere har gjort, bruker vi nå LocalStorage til å lagre dataene i stedet for å bruke sessionStorage. Årsaken er at vi antar at Behance-brukere sjelden vil oppdatere innholdet når det har blitt publisert. Så, i dette tilfellet, er det bedre å bruke LocalStorage, da det vil lagre data vedvarende; dataene forblir i nettleseren så lenge vi ikke forsettlig sletter den.
Deretter oppretter vi hovedfunksjonen som vil utføre Maginific Popup. Vi vil nevne denne funksjonen showGallery (). Vi vil også bruke følgende alternativer i Magnific Popup:
elementer; de elementer er veldig viktig her. Dette vil inneholde listen over bilder som skal vises i lysboksen.
galleri; Når vi aktiverer galleriet, vil Magnific Popup legge til piler for å navigere gjennom hvert bilde deri.
type; Vi vil bruke bilde for den eneste innholdstypen som er tillatt i lysboksen.
Dette siste stykket er uunngåelig; vi må legge til .magnificPopup ( 'åpen') så det åpner lysboksen umiddelbart etter initialisering.
Vi vil bare utføre showGallery () under visse forhold Hvis dataene for den valgte porteføljen er tilgjengelige i LocalStorage, må du få det og utføre showGallery (), ellers få dataene fra API med $ .GetJSON () Først, deretter utfør showGallery () og lagre dataene i localStorage for bruk i fremtiden. Som vi gjorde tidligere, må vi bruke JSON.stringify () å konvertere dataene til en streng slik at den kan lagres i lokalstørrelse, så vil vi bruke JSON.parse () å formatere dataene tilbake til JSON.
Sjekker etter bilder
Det vi må merke seg her er at innholdet hentet fra API-en kan være video, innebygd video eller tekst, som ikke er tillatt. Vi aksepterer bare bildet innholdstype. Derfor må vi legge til følgende koden for å filtrere innholdet før du sender dataene til localStorage.
var src = []; $ .each (projectContent.project.modules, function (index, mod) hvis (mod.src! = undefined) src.push (src: mod.src););
Nå, når du klikker på bildet, skal det zoome inn og bli vist i Lightbox-modus:
Hvis du inspiserer nettstedet med Chrome DevTools, bør du nå finne innholdet lagret i LocalStorage.
Videre kan du navigere gjennom alle bildene i innholdet ved hjelp av pilene. Men overgangen føles for øyeblikket ganske vanskelig (ikke sant?); det hopper fra ett bilde til et annet øyeblikkelig. Så la oss gjøre det jevnere og mer kommunikative med litt animasjon, skal vi?
Integrerer Animate.css
Først av alt, må vi legge til mainClass: 'animert' og removalDelay: 350 til vår magnificPopup-funksjon.
I denne koden la vi til en ny klasse som heter animert til lysboksen. De animert klassen er klassen som brukes i Animate.css for å angi animasjon for et element. Denne klassen vil også være nyttig for å aktivere eller deaktivere animasjonen som du vil; hvis du vil deaktivere det, fjerner du bare mainClass: 'animert', linje.
Vi har også lagt til removalDelay, som spesifiserer varigheten før lysboksen er fjernet fra DOM helt. Forsinkelsen her vil gi animasjonen litt tid til synlighet.
Tilpasse Keyframe-stiler
Deretter vil vi vedta noen få CSS-nøkkelrammer, transformasjoner og overganger som danner animasjonseffekten i Animate.css. Vi konverterer dem til LESS format ved hjelp av LESSHat.
Vi har lagt til flere Keyframes som heter fadeInRight, fadeInLeft, fadeOutRight, fadeOutLeft, fadeInDown, og fadeOutDown som har blitt oversatt til LESS format med LESSHat .nøkkelrammer () mixins.
Det er flere deler i lysboksen som vi vil animere, nemlig: bakgrunnsoverlegget som dekker hele visningsporten, lysinnholdets innhold eller bilde og navigasjonspilene.
Overlagets bakgrunns animasjon er ganske enkel. Det vil ikke trenge de Keyframes over, i det hele tatt vil det ganske enkelt falme inn når lysboksen viser seg og fades ut når den forsvinner. Her er alle stilregler for å oppnå den animasjonen.
I Magnific Popup er overleggsbakgrunnen gitt en klasse som heter mfp-bg. I denne koden setter vi oppaktheten til 0 så det vil i utgangspunktet være usynlig, og også angi overgangsvarigheten for opasitet eiendom.
Videre vil Magnific Popup produsere et sett med nye klasser for å målrette forskjellige stater; for eksempel når lysboksen er fullt vist, vil den legge til mfp-klar klasse. I denne tilstanden har vi satt oppaktheten til 0,8. Som vi har satt overgangen, vil det gi oss animasjonseffekten; opaciteten vil overføre fra 0 til 0,8 i 350ms.
Når lysboksen forsvinner, vil Magnific Popup deretter sende ut MFP-fjerning klasse. I denne tilstanden setter vi oppaktheten tilbake til 0, gjør overleggsbakgrunnen usynlig igjen.
Nedenfor er stilen regler som animerer lysboksen innholdet.
Som overleggsbakgrunnen, fastsetter vi også overgangsvarigheten for innholdet på 350 ms. Vi bruker også Keyframes med .animasjon navn () Mixins. Her har vi satt inn innholdet til å falme inn og samtidig skyve ned når det vises, og skyv ned og fade ut når det forsvinner.
Animerer navigasjonspilene
Til slutt vil vi legge til animasjonen for våre lyspærerpiler.
Koden her er ganske lik den koden som animerer innholdet. Her vil venstre pil falme inn og skyve fra høyre når den kommer opp, skyv til venstre og fade ut når den forsvinner. Høyrepilen vil rett og slett gjøre det motsatte.
Konklusjon
Det har vært en veldig lang opplæringsserie! Vi har suksessivt bygget en fungerende personlig porteføljeside fra bakken med Behance API som datakilde. For å bygge vår nettside har vi også benyttet en rekke moderne verktøy som LESS, HandlebarsJS og Animate.css. Det er ganske enkelt å distribuere nettstedet, siden det bare er en statisk HTML - faktisk vår demonstrasjon er vert som en GitHub statisk side. Alternativt kan du laste den opp med FTP til en webserver.
Hvis du vil ta dette prosjektet videre, kan du for eksempel legge til et "filter" som vil sortere porteføljen i henhold til det kreative feltet. Du kan også legge til gode sveveffekter. I hvert fall håper jeg at du likte serien, og lærte et par triks som du kan adoptere på ditt eget nettsted.
Share
else #if this.covers. [230]
ellers
/ if / if
Dataprojekt-ID i figurelement med ID-nummer 
Accentsconagua
else #if this.covers. [230] 
ellers 
/ if / if 
