Philter.js - Gratis Image Alteration Library ved hjelp av CSS-filtre
Instagram er kjent som det mest populære foto-nettverket. Den håndterer over 52 millioner bilder per dag og mange av dem inkludere filtre som endrer bilder på fluen.
Dette er også mulig ved bruk av CSS-filtre som søk direkte i nettleseren. Disse egendefinerte filteregenskapene har bred støtte over mange nettlesere, og de ser bra ut.
Med Philter JavaScript-plugin, Du kan skala denne prosessen for å spare tid og flytte koden til HTML for dynamiske filtereffekter.
Ved å bruke dette pluginet får du mye større kontroll over bildene dine. På denne måten kan du velge hvilke filtre du vil søke på individuelle bilder, og hvis bestemte filtre skal endres basert på brukeradferd som for eksempel svever.
CSS støtter animerte overganger og Philter gjør denne prosessen veldig enkel. Du laster bare ned Philter fra hjemmesiden eller fra GitHub repo. Når det er lagt til din nettside, bare du legg til initialiseringskoden og la det gå.
Her er en prøveutdrag fra GitHub repo:
Som standard kan du sette opp overganger og ekstra dataattributter som du kan legge til i HTML. De url parameter definerer banen der Philter skal se etter egendefinerte SVG-filer som brukes i filtreringsprosessen.
Disse ekstra filtre er pakket med biblioteket, slik at du ikke trenger å redigere dem i det hele tatt. Men du kan flytte dem rundt eller plassere dem i en annen katalogstruktur fra din nåværende fil, så denne innstillingen må kanskje endres.
Nå kan du bare legg til egendefinerte filtre rett til HTML-koden din
Her er en enkelt eksempel:
Du finner en full liste over alle filtre på GitHub, sammen med a fullfør oppsettguide og mange andre kodeprøver.
Philter er en av de kuleste gratis plugins rundt, og den skyver grensen til moderne CSS. Du kan til og med designe dine egne filtre hvis du er villig til å grave inn i kodebase og tinker rundt.
For et enkelt sted å komme i gang, bare besøk Philters hjemmeside og last ned en kopi. Du kan få det opp og kjører på kort tid.
