Philter.js - Free Library Alteration Library przy użyciu filtrów CSS
Instagram jest powszechnie znany jako najpopularniejsza sieć zdjęć. Obsługuje ponad 52 miliony zdjęć dziennie i wiele z nich włącz filtry które zmieniają obrazy w locie.
Jest to również możliwe przy użyciu filtrów CSS, które aplikuj bezpośrednio w przeglądarce. Te niestandardowe właściwości filtrów mają szerokie wsparcie w wielu przeglądarkach i wyglądają świetnie.
Z Wtyczka JavaScript do filtru, możesz skalować ten proces, aby zaoszczędzić czas i przenieść kod do HTML dynamiczne efekty filtrów.
Korzystając z tej wtyczki, zyskujesz znacznie większa kontrola nad zdjęciami. W ten sposób możesz wybrać filtry, które chcesz zastosować do poszczególnych obrazów i czy niektóre filtry powinny się zmieniać w zależności od zachowania użytkownika, np. Najechania kursorem.
CSS obsługuje animowane przejścia a Philter czyni ten proces naprawdę prostym. Wystarczy pobrać Philtera ze strony głównej lub z repozytorium GitHub. Po dodaniu do Twojej strony internetowej dodaj kod inicjujący i odpuść.
Tutaj jest przykładowy urywek z repozytorium GitHub:
Domyślnie możesz ustaw przejścia i dodatkowe atrybuty danych które możesz dołączyć w HTML. The url parametr określa ścieżkę, w której Philter powinien szukać niestandardowych plików SVG używanych w procesie filtrowania.
Te dodatkowe filtry są pakowane z biblioteką, więc nie musisz ich wcale edytować. Ale możesz je przenosić lub umieszczać w innej strukturze katalogów niż bieżący plik, więc to ustawienie może wymagać zmiany.
Teraz możesz po prostu dodaj własne filtry prawo do twojego HTML
Tutaj jest prosty przykład:
Możesz znaleźć pełna lista wszystkich filtrów na GitHub wraz z a kompletny przewodnik konfiguracji i wiele innych próbek kodu.
Philter jest jedną z najfajniejszych darmowych wtyczek dookoła i przesuwa granice nowoczesnego CSS. Możesz nawet zaprojektuj własne filtry jeśli chcesz zagłębić się w bazę kodu i majsterkować.
Aby rozpocząć proste miejsce, wystarczy odwiedzić stronę główną Filtera i pobrać kopię. Możesz go szybko uruchomić i uruchomić.
