Philter.js - Gratis billedændringsbibliotek ved hjælp af CSS-filtre
Instagram er kendt som det mest populære foto netværk. Det håndterer over 52 millioner fotos om dagen og mange af dem inkludere filtre der ændrer billeder i luften.
Dette er også muligt ved hjælp af CSS-filtre som Ansøg direkte i browseren. Disse brugerdefinerede filteregenskaber har bred støtte på tværs af mange browsere, og de ser godt ud.
Med Philter JavaScript plugin, Du kan skala denne proces for at spare tid og flytte din kode til HTML for dynamiske filtereffekter.
Ved at bruge dette plugin, får du meget større kontrol over dine billeder. På denne måde kan du vælge, hvilke filtre du vil anvende på individuelle billeder, og hvis bestemte filtre skal ændres baseret på brugeradfærd, såsom svingning.
CSS understøtter animerede overgange og philter gør denne proces virkelig enkel. Du kan bare downloade Philter fra hjemmesiden eller fra GitHub repo. Når det er tilføjet til din webside, er du bare Tilføj initialiseringskoden og lad det gå.
Her er en prøveuddrag fra GitHub repo:
Som standard kan du oprette overgange og ekstra data attributter at du kan tilføje i HTML. Det url parameter definerer stien, hvor Philter skal kigge efter brugerdefinerede SVG-filer, der anvendes i filtreringsprocessen.
Disse ekstra filtre er pakket med biblioteket, så du behøver ikke at redigere dem overhovedet. Men du kan flytte dem rundt eller placere dem i en anden mappestruktur fra din nuværende fil, så denne indstilling Måske skal ændres.
Nu kan du bare Tilføj tilpassede filtre ret til din HTML
Her er en simpelt eksempel:
Du kan finde en fuld liste over alle filtre på GitHub, sammen med a fuldfør opsætningsvejledningen og mange andre kodeprøver.
Philter er et af de fedeste gratis plugins rundt, og det skubber grænserne for moderne CSS. Du kan endda designe dine egne filtre hvis du er villig til at grave i codebase og tinker rundt.
For et enkelt sted at komme i gang kan du bare besøge Philters hjemmeside og downloade en kopi. Du kan få det op og køre på ingen tid.
