In eerdere zelfstudies hebben we gekeken naar het gebruik van de Behance-API om onze eigen webpagina te besturen, en vervolgens hebben we het gebruik van LESS zichtbaar gemaakt. In deze tutorials gaan we de ervaring voor bezoekers verbeteren door een lightbox-effect en enkele CSS-animaties toe te voegen.
Lightbox en animatie-effecten
Veel portfoliobronnen gebruiken tegenwoordig een lightbox van een soort voor hun portfolio-afbeeldingen. In deze zelfstudie zullen we hetzelfde toepassen op onze website. De afbeeldingsafdekking zoomt in wanneer de gebruikers erop klikken, samen met de andere afbeeldingen in de inhoud, zodat de gebruikers elke afbeelding van dichterbij kunnen zien.
Dit zijn de tools die we nodig hebben om dit te bereiken:
Magnific Popup
We gaan vertrouwen op een plug-in voor jQuery Lightbox genaamd Magnific Popup van Dmitry Semenov. Het is licht van gewicht, snel en snel - precies zoals we het willen.
Animate.css
We zullen ook CSS3-animatie integreren om onze website tot leven te brengen. We zullen enkele fragmenten van Animate.css gebruiken, die een enorme verzameling CSS3-animaties bieden via een aantal inloopklassen om de animatie onmiddellijk toe te passen.
Integratie van Magnific Popup
Laten we beginnen met het toevoegen van de Magnific Popup-stylesheet aan de hoofd label.
Vervolgens voegen we de scripts lager op de pagina in het voettekst toe, waardoor de pagina een kans krijgt om te renderen voordat de gedragsscripts worden geladen.
Vervolgens moeten we een HTML5 toevoegen gegevens attribuut, data-project-id = "this.id" naar de figuur element dat de portfolio-omslagafbeelding omsluit, als volgt.
... #in dit geval.covers. [404] else #if this.covers. [230] anders /als als ...
Vernieuw de website en inspecteer de website via Chrome DevTools of Firebug. Je zou het moeten vinden data-project-id bevat het ID-nummer van de portfolio, zoals hieronder te zien is.
Het data-project-id in figuurelement met het ID-nummer
We zullen de gebruiken gegevens attribuut om de inhoud van de geselecteerde portfolio op te halen met die ID later toegewezen.
Daarna moeten we ook het uiterlijk van de cursor wijzigen in zoomen, als volgt:
De in zoomen cursor zal suggereren dat de afbeelding zoombaar is; de gebruiker zou moeten verwachten dat ze op de afbeelding kunnen klikken. echter, de in zoomen waarde wordt nog niet ondersteund in een versie van Internet Explorer, volgens MDN. Daarom hebben we ook de cursor opgegeven wijzer vóór cursor: inzoomen als de terugval voor zowel Internet Explorer als de andere browsers die dit mogelijk niet ondersteunen.
Laat het werken
Nu zullen we het script toevoegen om Magnific Popup te initialiseren. Aangezien het plan niet alleen is om de cover van het portfolio weer te geven, maar ook om de andere afbeeldingen in de inhoud te plaatsen, ziet het script er misschien een beetje zwaar uit. Dus hier zullen we het script sequentieel toevoegen. Het eerste dat we zullen schrijven is het jQuery .bij klikken') methode. We zullen alleen Magnific Popup uitvoeren wanneer de gebruiker op de omslagafbeelding klikt.
$ ('# portfolio'). on ('klik', '.portfolio-cover', functie () // de rest van het script gaat hier ...
Vervolgens zullen we de volgende variabelen definiëren:
$ this, de variabele verwijst naar het object gebonden aan de .op() methode.
projectID zal bevatten $ This.data ( 'project-id') die dat ID-nummer uit de data-project-id attribuut. We zullen deze ID gebruiken om de inhoud op te halen via de Behance-API.
beProjectContentAPI bevat de Behance API-eindpunten om de inhoud van het Behance-project op te halen.
keyname, deze variabele vormt de sleutelnaam die we zullen gebruiken voor het opslaan van de gegevens die zijn opgehaald uit Behance in localStorage. Het naamformaat is behanceProjectImages- gevolgd door het project-ID-nummer. In tegenstelling tot wat we eerder hebben gedaan, gebruiken we nu localStorage om de gegevens op te slaan in plaats van sessionStorage te gebruiken. De reden is dat we ervan uitgaan dat Behance-gebruikers de inhoud zelden bijwerken nadat deze is gepubliceerd. In dit geval is het daarom beter om localStorage te gebruiken, omdat het de gegevens permanent bewaart; de gegevens blijven in de browser staan zolang we deze niet opzettelijk verwijderen.
Vervolgens maken we de hoofdfunctie waarmee Maginific Popup wordt uitgevoerd. We zullen deze functie een naam geven showGallery (). We zullen ook de volgende opties toepassen in Magnific Popup:
items; de items zijn erg belangrijk hier. Dit bevat de lijst met afbeeldingen die in de Lightbox worden weergegeven.
galerij; wanneer we galerij inschakelen, voegt Magnific Popup pijlen toe om door elke afbeelding te navigeren.
type; we zullen afbeelding gebruiken voor het enige inhoudstype dat in de Lightbox is toegestaan.
Dit laatste stuk is onvermijdelijk; we zullen moeten toevoegen .magnificPopup ( 'open') dus het opent de Lightbox onmiddellijk na de initialisatie.
We zullen alleen uitvoeren showGallery () onder bepaalde omstandigheden; als de gegevens voor de geselecteerde portfolio beschikbaar zijn in localStorage, haal die dan op en voer de showGallery (), anders krijg je de gegevens van de API mee $ .GetJSON () eerst, voer dan uit showGallery () en sla de gegevens op in localStorage voor gebruik in de toekomst. Zoals we eerder hebben gedaan, moeten we gebruiken JSON.stringify () om de gegevens in een string om te zetten, zodat deze kan worden opgeslagen in localStorage, dan zullen we gebruiken JSON.parse () om de gegevens terug naar JSON te formatteren.
Zoeken naar afbeeldingen
Wat we hier moeten opmerken is dat de inhoud die uit de API wordt opgehaald, video, ingesloten video of tekst kan zijn, wat niet is toegestaan; we accepteren alleen het beeldinhoudstype. Dus voordat we de gegevens naar localStorage plaatsen, moeten we het volgende codefragment toevoegen om de inhoud te filteren.
var src = []; $ .each (projectContent.project.modules, function (index, mod) if (mod.src! = undefined) src.push (src: mod.src););
Hier is het hele script aan het einde.
$ ('# portfolio'). on ('klik', '.portfolio-cover', functie () var $ this = $ (this), projectID = $ this.data ('project-id'), beProjectContentAPI = 'http://www.behance.net/v2/projects/'+ projectID +'? callback =? & api_key = '+ apiKey, keyName =' behanceProjectImages- '+ projectID; function showGallery (dataSource) $ this.magnificPopup ( items: dataSource, gallery: enabled: true, type: 'image'). magnificPopup ('open');; if (localStorage.getItem (keyName)) var srcItems = JSON.parse (localStorage.getItem (keyName)); showGallery (srcItems); else $ .getJSON (beProjectContentAPI, function (projectContent) var src = []; $ .each (projectContent.project.modules, function (index, mod) if (mod .src! = undefined) src.push (src: mod.src);); showGallery (src); var data = JSON.stringify (src); localStorage.setItem (keyName, data);) ;;);
Wanneer u nu op de afbeelding klikt, moet deze inzoomen en op Lightbox-wijze worden weergegeven:
Als u de website inspecteert met Chrome DevTools, moet u nu vaststellen dat de inhoud is opgeslagen in localStorage.
Bovendien kunt u met behulp van de pijlen door alle afbeeldingen in de inhoud navigeren. Maar de overgang voelt momenteel behoorlijk ongemakkelijk (toch?); het springt onmiddellijk van het ene beeld naar het andere. Laten we het dus soepeler en communicatiever maken met wat animatie?
Animate.css integreren
Allereerst moeten we toevoegen mainClass: 'geanimeerd' en removalDelay: 350 naar onze magnificPopup-functie.
In deze code hebben we een nieuwe klasse met de naam toegevoegd geanimeerde naar de Lightbox. De geanimeerde class is de klasse die wordt gebruikt in Animate.css om animatie voor een element aan te duiden. Deze klasse zou ook nuttig zijn om de animatie in of uit te schakelen zoals u wilt; als je het wilt uitschakelen, verwijder dan gewoon de mainClass: 'geanimeerd', lijn.
We hebben ook toegevoegd removalDelay, die de duur specificeert voordat de Lightbox volledig uit de DOM wordt verwijderd. De vertraging hierin geeft de animatie enige zichtbaarheid.
Keyframe-stijlen aanpassen
Vervolgens zullen we een paar CSS Keyframes, Transforms en Transitions gebruiken die het animatie-effect in Animate.css vormen. We zullen ze in LESS-formaat converteren met LESSHat.
We hebben verschillende Keyframes met de naam toegevoegd fadeInRight, fadeInLeft, fadeOutRight, fadeOutLeft, fadeInDown, en fadeOutDown die in LESS-formaat zijn vertaald met LESSHat .keyframes () mixins.
Er zijn verschillende delen binnen de Lightbox die we zullen animeren, namelijk: de achtergrondoverlay die het gehele venster, de inhoud of afbeelding van de Lightbox en de navigatiepijlen omvat.
De overlay-achtergrondanimatie is vrij eenvoudig. Het heeft deze Keyframes hierboven niet nodig, het zal gewoon vervagen wanneer de Lightbox verschijnt en verdwijnt wanneer deze verdwijnt. Hier zijn alle stijlregels om die animatie te bereiken.
In Magnific Popup krijgt de overlay-achtergrond een klasse met de naam mfp-bg. In deze code hebben we de dekking ingesteld op 0 dus het zal in eerste instantie onzichtbaar zijn, en ook de Transitieduur instellen voor de ondoorzichtigheid eigendom.
Verder zal Magnific Popup een reeks nieuwe klassen produceren voor het targeten van verschillende staten; bijvoorbeeld, wanneer de Lightbox volledig wordt getoond, zal het de mfp-ready klasse. In deze staat hebben we de dekking ingesteld op 0.8. Zoals we de overgang hebben ingesteld, geeft dit ons het animatie-effect; de dekking zal van 0 tot 0.8 in 350ms overbrengen.
Wanneer de lightbox verdwijnt, geeft Magnific Popup de uitvoer weer mfp-verwijdering klasse. In deze staat zetten we de dekking terug naar 0, de overlay-achtergrond weer onzichtbaar maken.
Hieronder staan de stijlregels die de Lightbox-inhoud animeren.
Net als de overlay-achtergrond, stellen we ook de duur van de overgang in voor de inhoud 350ms. We passen de Keyframes ook toe met .animatie-naam () Mixins. Hier hebben we de inhoud ingesteld om in te faden en tegelijkertijd naar beneden te schuiven wanneer deze verschijnt, en dan naar beneden en uitfaden wanneer deze verdwijnt.
De navigatiepijlen animeren
Ten slotte zullen we de animatie toevoegen voor onze Lightbox-pijlen.
De code hier is vrij gelijkaardig aan het fragment dat de inhoud animeert. Hier zal de linkerpijl vervagen en van rechts schuiven wanneer deze wordt weergegeven, dan naar links schuiven en uitfaden wanneer deze verdwijnt. De rechterpijl zal eenvoudig het tegenovergestelde doen.
Conclusie
Het is een lange tutorialserie geweest! We hebben met succes een werkende persoonlijke portfoliowebsite opgebouwd met de Behance-API als de gegevensbron. Om onze website te bouwen, hebben we ook een aantal moderne tools gebruikt zoals LESS, HandlebarsJS en Animate.css. Het is vrij eenvoudig om de website te implementeren, omdat het slechts een statische HTML is - in feite wordt onze demo gehost als een statische GitHub-pagina. Als alternatief kunt u het via FTP uploaden naar een webserver.
Als u dit project verder wilt nemen, kunt u bijvoorbeeld een 'filter' toevoegen dat het portfolio sorteert op basis van het advertentieveld. Je zou ook leuke hover-effecten kunnen toevoegen. Ik hoop dat je in ieder geval van de serie hebt genoten en een paar trucs hebt geleerd die je op je eigen website kunt gebruiken.
Share
else #if this.covers. [230]
anders
/als als
Het data-project-id in figuurelement met het ID-nummer 
Accentsconagua
else #if this.covers. [230] 
anders 
/als als 
