Philter.js - Ingyenes képjavító könyvtár CSS szűrők használatával
Instagram széles körben ismert, mint a legnépszerűbb fotóhálózat. Naponta több mint 52 millió fotót és sokat kezeli tartalmazhat szűrőket amelyek megváltoztatják a képeket.
Ez a CSS szűrők használatával is lehetséges közvetlenül a böngészőben. Ezek az egyéni szűrő tulajdonságok széles körű támogatást nyújtanak számos böngészőben, és nagyszerűek.
A ... val Philter JavaScript plugin, ezt a folyamatot átméretezheti, hogy időt takarítson meg és a kódot HTML-re mozgassa dinamikus szűrőhatások.
A plugin használatával nyer sokkal nagyobb ellenőrzést gyakorol a képek felett. Így kiválaszthatja, hogy mely szűrőket kívánja alkalmazni az egyes képekhez, és ha bizonyos szűrőknek a felhasználói viselkedés, például a lebegés alapján kell megváltoztatniuk.
CSS támogatja az animált átmeneteket Philter nagyon egyszerűvé teszi ezt a folyamatot. Csak Philtert tölthet le a honlapról vagy a GitHub repóból. Miután hozzáadtad a weblapodhoz, csak adja hozzá az inicializálási kódot és hagyd, hogy menjen.
Itt van egy minta töredéke a GitHub repóból:
Alapértelmezés szerint átmenetek és extra adattulajdonságok beállítása hogy a HTML-ben hozzáadható. A url paraméter határozza meg azt a útvonalat, ahol Philternek meg kell keresnie a szűrési folyamatban használt egyéni SVG fájlokat.
Ezek az extra szűrők a könyvtárba csomagolva, így nem kell őket egyáltalán szerkeszteni. Ezeket a beállításokat azonban áthelyezheti vagy helyezheti el egy másik könyvtárstruktúrába az aktuális fájlból lehet, hogy módosítani kell.
Most már csak Egyéni szűrők hozzáadása közvetlenül a HTML-hez
Itt van egy egyszerű példa:
Megtalálható a az összes szűrő teljes listája a GitHub-on együtt a teljes telepítési útmutató és sok más kódmintát.
Philter az egyik legmenőbb szabad plugin, amely a korszerű CSS határait tolja el. Még tervezze meg saját szűrőit ha hajlandó vagytok a codebase-be ásni és körülvágni.
Egy egyszerű hely megkezdéséhez látogasson el a Philter honlapjára és töltsön le egy példányt. Lehet, hogy nem működik.
