Philter.js - Безплатна библиотека за промяна на изображения, използваща CSS филтри
Instagram е широко известен като най-популярната фото мрежа. Тя обработва над 52 милиона снимки на ден и много от тях включва филтри които променят изображенията в движение.
Това е възможно и с помощта на CSS филтри, които приложите директно в браузъра. Тези персонализирани филтърни свойства имат широка подкрепа в много браузъри и изглеждат страхотно.
С Филтърски плъгин за JavaScript, можете да разширите този процес, за да спестите време и да преместите кода си в HTML за ефекти на динамични филтри.
Чрез използването на този плъгин печелите много по-голям контрол над вашите изображения. По този начин можете да изберете кои филтри искате да приложите за отделни изображения и дали определени филтри трябва да се променят въз основа на поведението на потребителя, като например навигиране.
CSS поддържа анимирани преходи и Philter прави този процес много прост. Просто изтеглете Philter от началната страница или от GitHub repo. След като бъде добавен към вашата уеб страница, вие просто добавете кода за инициализация и го пуснете.
Ето едно примерен фрагмент от репо GitHub:
По подразбиране можете настройване на преходи и допълнителни атрибути на данни които можете да добавите в HTML. Най- URL Параметърът определя пътя, по който Philter трябва да търси потребителски SVG файлове, използвани в процеса на филтриране.
Тези допълнителни филтри са в комплект с библиотеката, така че изобщо не трябва да ги редактирате. Но можете да ги преместите или да ги поставите в друга структура на директория от текущия си файл, така че тази настройка може да се наложи да бъдат променени.
Сега можете просто добавете персонализирани филтри право на HTML
Ето едно прост пример:
Можете да намерите a пълен списък на всички филтри в GitHub, заедно с пълно ръководство за настройка и много други проби от кодове.
Philter е един от най-готините безплатни плъгини наоколо и прокарва границите на модерните CSS. Можете дори проектирайте свои собствени филтри ако сте готови да копаете в кодовата база и да карате.
За да започнете, просто посетете началната страница на Philter и изтеглете копие. Можете да го направите и да стартирате за нула време.
