Philter.js - vaba pildi muutmise raamatukogu CSS filtrite abil
Instagram on laialt tuntud kui kõige populaarsem fotovõrk. See tegeleb üle 52 miljoni fotoga päevas ja paljud neist sisaldama filtreid mis muudavad pilte lennul.
See on võimalik ka CSS-filtrite abil kohaldatakse otse brauseris. Need kohandatud filtrite omadused toetavad paljusid brausereid ja nad näevad suurepäraselt välja.
Koos Philteri JavaScript plugin, saate seda protsessi skaleerida, et säästa aega ja oma koodi HTML-isse viia dünaamilised filtriefektid.
Kasutades seda pluginat, saate seda palju suuremat kontrolli oma piltide üle. Nii saate valida, milliseid filtreid soovite individuaalsetele piltidele rakendada ja kas teatud filtrid peaksid muutuma vastavalt kasutaja käitumisele, näiteks hovering.
CSS toetab animeeritud üleminekuid ja Philter teeb selle protsessi väga lihtsaks. Laadige Philter lihtsalt alla kodulehelt või GitHub repost. Kui see on teie veebilehe juurde lisatud, siis lihtsalt lisage lähtekoodi ja lase tal minna.
Siin on a proovi fragment alates GitHub repost:
Vaikimisi saate seda teha seada üleminekuid ja täiendavaid andme atribuute HTML-i lisada. The url Parameeter määrab tee, kus Philter peaks otsima filtreerimisprotsessis kasutatavaid kohandatud SVG-faile.
Need lisafiltrid on pakitud raamatukogu, nii et sa ei pea neid üldse redigeerima. Kuid te võite neid oma praegusest failist ümber paigutada või paigutada teise kataloogistruktuurini, nii et see säte võib olla vaja muuta.
Nüüd saate lihtsalt lisage kohandatud filtrid õigus oma HTML-ile
Siin on a lihtne näide:
Leiad a kõigi filtrite täielik nimekiri GitHubis koos a täielik häälestusjuhend ja paljud teised koodinäidised.
Philter on üks lahedamaid tasuta pluginaid ja see surub kaasaegse CSSi piirid. Võite isegi kujundage oma filtrid kui sa oled valmis kaevama kodeerimisbaasi ja võrgutama.
Lihtsaks alustamiseks külastage lihtsalt Philteri kodulehte ja laadige alla koopia. Teil on võimalik seda teha ja käivitada.
