Philter.js - Gratis bildändringsbibliotek med CSS-filter
Instagram är allmänt känt som det mest populära foto-nätverket. Det hanterar över 52 miljoner bilder per dag och många av dem inkludera filter som ändrar bilder på flugan.
Detta är också möjligt med hjälp av CSS-filter som Ansök direkt i webbläsaren. Dessa anpassade filteregenskaper har stort stöd över många webbläsare och de ser bra ut.
Med Philter JavaScript-plugin, Du kan skala denna process för att spara tid och flytta din kod till HTML för dynamiska filtereffekter.
Genom att använda det här pluginet får du mycket större kontroll över dina bilder. På så sätt kan du välja vilka filter du vill tillämpa på enskilda bilder och om vissa filter ska ändras baserat på användarbeteende som svängning.
CSS stöder animerade övergångar och Philter gör denna process väldigt enkel. Du laddar bara ner Philter från hemsidan eller från GitHub repo. När det är lagt till på din webbsida, bara du lägg till initialiseringskoden och låt det gå.
Här är en provbit från GitHub repo:
Som standard kan du konfigurera övergångar och extra data attribut som du kan lägga till i HTML. De url parameter definierar sökvägen där Philter ska leta efter egna SVG-filer som används i filtreringsprocessen.
Dessa extrafilter är förpackas med biblioteket, så du behöver inte redigera dem alls. Men du kan flytta dem runt eller placera dem i en annan katalogstruktur från din nuvarande fil, så den här inställningen kan behöva ändras.
Nu kan du bara lägg till anpassade filter rätt till din HTML
Här är en enkelt exempel:
Du kan hitta en fullständig lista över alla filter på GitHub, tillsammans med a komplett installationsguide och många andra kodprover.
Philter är en av de coolaste fria pluginsna runt och det skjuter gränserna för moderna CSS. Du kan till och med designa dina egna filter om du är villig att gräva i codebase och tinker runt.
För en enkel plats att komma igång, besök bara Philters hemsida och ladda ner en kopia. Du kan få den upp och köra på nolltid.
