Philter.js - bezmaksas attēlu izmaiņu bibliotēka, izmantojot CSS filtrus
Instagram ir plaši pazīstams kā populārākais foto tīkls. Tā apstrādā vairāk nekā 52 miljonus fotoattēlu dienā un daudzus no tiem ietver filtrus kas maina attēlus lidojumā.
Tas ir iespējams arī, izmantojot CSS filtrus pieteikties tieši pārlūkprogrammā. Šīm pielāgotajām filtra īpašībām ir plašs atbalsts daudzās pārlūkprogrammās, un tās izskatās lieliski.
Ar Filtera JavaScript spraudnis, jūs varat šo procesu mērogot, lai ietaupītu laiku un pārvietotu kodu HTML dinamisku filtra efektu.
Izmantojot šo spraudni, jūs iegūstat daudz lielāku kontroli pār jūsu attēliem. Tādā veidā jūs varat izvēlēties, kurus filtrus vēlaties piemērot atsevišķiem attēliem, un, ja dažiem filtriem jāmaina, pamatojoties uz lietotāja uzvedību, piemēram, uz leju.
CSS atbalsta animētas pārejas un Filters padara šo procesu patiešām vienkāršu. Jūs vienkārši lejupielādējat Philter no mājas lapas vai no GitHub repo. Kad tas ir pievienots jūsu tīmekļa lapai, jūs vienkārši pievienojiet inicializācijas kodu un ļaujiet tai iet.
Lūk, a parauga fragments no GitHub repo:
Pēc noklusējuma jūs varat izveidot pārejas un papildu datu atribūtus varat pievienot HTML. The URL parametrs nosaka ceļu, kuram Filteram jāmeklē pielāgoti SVG faili, kas tiek izmantoti filtrēšanas procesā.
Šie papildu filtri ir iepakotas kopā ar bibliotēku, tāpēc jums nav nepieciešams tos rediģēt. Taču jūs varat pārvietot tos vai novietot tos citā direktorijā no pašreizējā faila, tāpēc šis iestatījums var būt nepieciešams mainīt.
Tagad jūs varat vienkārši pievienot pielāgotus filtrus tiesības uz HTML
Lūk, a vienkāršs piemērs:
Jūs varat atrast pilns filtru saraksts GitHub, kopā ar a pilnīga iestatīšanas rokasgrāmata un daudzi citi kodu paraugi.
Filteris ir viens no stilīgākajiem bezmaksas spraudņiem, un tas nospiež mūsdienu CSS robežas. Jūs pat varat veidojiet savus filtrus ja esat gatavs izrakt koda bāzē un apzaļumot.
Lai sāktu vienkāršu vietu, apmeklējiet Philter mājaslapu un lejupielādējiet kopiju. Jūs varat to darīt un darboties bez laika.
