Philter.js - безкоштовна бібліотека зміни зображень за допомогою фільтрів CSS
Instagram широко відома як найпопулярніша фотосеть. Він обробляє більше 52 мільйонів фотографій на день і багато з них включають фільтри що змінюють зображення на льоту.
Це також можливо за допомогою фільтрів CSS, які застосовувати безпосередньо в браузері. Ці властивості власного фільтра мають широку підтримку в багатьох браузерах, і вони чудово виглядають.
З Філтерський плагін JavaScript, Ви можете масштабувати цей процес, щоб заощадити час і перемістити код у HTML для ефекти динамічного фільтра.
Використовуючи цей плагін, ви отримуєте набагато більший контроль над зображеннями. Таким чином можна вибрати, які фільтри потрібно застосувати до окремих зображень, і якщо певні фільтри повинні змінюватися на основі поведінки користувача, наприклад, зависання.
CSS підтримує анімовані переходи Філтер робить цей процес дуже простим. Ви просто завантажили Philter з домашньої сторінки або з репо GitHub. Після додавання до вашої веб-сторінки ви просто додайте код ініціалізації і відпустіть.
Ось a фрагмент зразка від репо GitHub:
За замовчуванням можна встановлювати переходи та додаткові атрибути даних що ви можете додати в HTML. The url Параметр визначає шлях, де Philter повинен шукати користувацькі файли SVG, що використовуються в процесі фільтрації.
Ці додаткові фільтри є в комплекті з бібліотекою, так що вам взагалі не потрібно редагувати їх. Але ви можете перемістити їх або помістити в іншу структуру каталогів з поточного файлу, отже, це налаштування може бути необхідно змінити.
Тепер можна просто додати власні фільтри право на HTML
Ось a простий приклад:
Ви можете знайти Повний список всіх фільтрів на GitHub, поряд з повний посібник з налаштування і багато інших зразків коду.
Philter є одним з найкрутіших безкоштовних плагінів, і він висуває межі сучасного CSS. Можна навіть розробляйте власні фільтри якщо ви готові копатися в кодовій базі і возитися.
Для простого місця для початку, просто відвідайте домашню сторінку Philter і завантажте копію. Ви можете запустити його в найкоротші терміни.
