Philter.js - Free Image Alteration Library Použití CSS filtrů
Instagram je široce známý jako nejoblíbenější fotografická síť. Zpracovává přes 52 milionů fotografií denně a mnoho z nich zahrnují filtry které mění snímky za chodu.
To je také možné pomocí CSS filtrů, které přímo v prohlížeči. Tyto vlastní vlastnosti filtrů mají širokou podporu v mnoha prohlížečích a vypadají skvěle.
S Philter JavaScript plugin, můžete tento proces zmenšit a ušetřit tak čas a přesunout kód do HTML efekty dynamického filtru.
Pomocí tohoto pluginu získáte zisk mnohem větší kontrolu nad obrázky. Tímto způsobem si můžete vybrat, které filtry chcete aplikovat na jednotlivé obrázky a zda by se určité filtry měly měnit na základě chování uživatele, například přechodu.
CSS podporuje animované přechody a Philter dělá tento proces opravdu jednoduchým. Stačí si stáhnout Philter z domovské stránky nebo z repo GitHub. Jakmile je přidán na vaši webovou stránku, stačí přidat inicializační kód a nechte to jít.
Tady je ukázkový úryvek z repo GitHub:
Ve výchozím nastavení můžete nastavit přechody a další atributy dat můžete připojit v HTML. url Parametr definuje cestu, kde by měl Philter hledat vlastní SVG soubory používané v procesu filtrování.
Tyto extra filtry jsou s knihovnou, takže je nemusíte vůbec upravovat. Můžete je však přesunout nebo umístit do jiné adresářové struktury z aktuálního souboru, takže toto nastavení může být třeba změnit.
Teď můžeš přidat vlastní filtry na váš HTML
Tady je jednoduchý příklad:
Můžete najít úplný seznam všech filtrů na GitHub, spolu s kompletní průvodce nastavením a mnoho dalších ukázek kódu.
Philter je jedním z nejlepších free pluginů v okolí a posouvá hranice moderních CSS. Můžete dokonce navrhněte si vlastní filtry pokud jste ochotni kopat do codebase a drotat kolem.
Chcete-li začít jednoduše, navštivte domovskou stránku společnosti Philter a stáhněte si kopii. Můžete ji nechat běžet v žádném okamžiku.
