Philter.js - Knjižnica brezplačnih sprememb slik z uporabo CSS filtrov
Instagram je splošno znano kot najbolj priljubljeno omrežje fotografij. Obdeluje več kot 52 milijonov fotografij na dan in številne od njih vključujejo filtre ki spreminjajo slike na letalu.
To je mogoče tudi s pomočjo CSS filtrov, ki neposredno v brskalniku. Lastnosti filtra po meri imajo široko podporo v številnih brskalnikih in izgledajo odlično.
Z Filter JavaScript plugin, ta proces lahko razširite, da prihranite čas in premaknete kodo v HTML za učinki dinamičnega filtra.
Z uporabo tega vtičnika pridobite veliko večji nadzor nad slikami. Na ta način lahko izberete filtre, ki jih želite uporabiti za posamezne slike, in če bi se morali nekateri filtri spreminjati glede na vedenje uporabnika, kot je lebdenje.
CSS podpira animirane prehode in Philter naredi ta proces zelo preprost. Pravkar si prenesete Philterja z domače strani ali iz replike GitHub. Ko je dodana na vašo spletno stran, ste pravkar dodajte inicializacijsko kodo in pusti.
Tukaj je a odrezek vzorca iz repo GitHub:
Privzeto lahko nastavitev prehodov in dodatnih podatkovnih atributov ki jo lahko dodate v HTML. The url parameter definira pot, kjer naj Philter išče datoteke SVG po meri, uporabljene v postopku filtriranja.
Ti dodatni filtri so v knjižnici, zato jih sploh ni treba urejati. Lahko pa jih premaknete ali jih postavite v drugo strukturo imenika iz trenutne datoteke, tako da to nastavitev morda treba spremeniti.
Zdaj, lahko samo dodaj filtre po meri pravico do HTML-ja
Tukaj je a preprost primer:
Najdete lahko a popoln seznam vseh filtrov na GitHub, skupaj z celoten priročnik za namestitev in veliko drugih vzorcev kode.
Philter je eden izmed najbolj kul brezplačnih vtičnikov in potiska meje sodobnega CSS-ja. Lahko celo oblikujete svoje filtre če ste pripravljeni kopati v kodno bazo in krožiti okoli.
Za preprosto mesto za začetek obiščite domačo stran Philter in prenesite kopijo. V kratkem času ga lahko nastavite na delovanje.
