Philter.js - Nemokama vaizdų keitimo biblioteka naudojant CSS filtrus
Instagram yra plačiai žinomas kaip populiariausias nuotraukų tinklas. Ji tvarko daugiau nei 52 mln. Nuotraukų per dieną ir daugelį jų įtraukti filtrus kurie keičia vaizdus skristi.
Tai taip pat įmanoma naudojant CSS filtrus taikomos tiesiogiai naršyklėje. Šios pasirinktinių filtrų ypatybės turi didelę paramą daugelyje naršyklių ir puikiai atrodo.
Su „Philter JavaScript“ papildinys, šį procesą galite išplėsti, kad sutaupytumėte laiko ir perkeltumėte kodą į HTML dinaminio filtro efektai.
Naudodami šį papildinį, jūs gaunate daug geriau kontroliuoti savo vaizdus. Tokiu būdu galite pasirinkti, kuriuos filtrus norite taikyti atskiriems vaizdams ir ar tam tikri filtrai turėtų keistis pagal naudotojo elgesį, pvz., Užvažiavimą.
CSS palaiko animuotus perėjimus Filteris daro šį procesą labai paprastą. Filtrą tiesiog atsisiųsite iš pagrindinio puslapio arba iš „GitHub“ repo. Kai tik jis pridedamas prie jūsų tinklalapio, jūs tiesiog pridėti pradinio kodo ir leiskite jam eiti.
Štai a mėginio fragmentas iš „GitHub“ repo:
Pagal numatytuosius nustatymus galite nustatyti perėjimus ir papildomus duomenų atributus galite pridėti prie HTML. The URL
parametras apibrėžia kelią, kur Philter turėtų ieškoti pasirinktinių SVG failų, naudojamų filtravimo procese.
Šie papildomi filtrai yra supakuota su biblioteka, todėl jums nereikia jų redaguoti. Tačiau galite perkelti juos į kitą vietą arba įdėti į kitą katalogo struktūrą iš dabartinio failo, todėl šis nustatymas gali tekti keisti.
Dabar galite tiesiog pridėti priskirtus filtrus teisę į HTML elementų arba jų konteinerių.
Štai a paprastas pavyzdys:
Galite rasti visas filtrų sąrašas GitHub, kartu su a užbaigti sąrankos vadovą ir daug kitų kodų pavyzdžių.
Filteris yra vienas iš geriausių nemokamų papildinių, o tai verčia šiuolaikinės CSS ribas. Jūs netgi galite sukurti savo filtrus jei esate pasiruošęs kasti į kodo bazę ir apsirengti.
Jei norite paprasta pradėti darbą, tiesiog apsilankykite „Philter“ pagrindiniame puslapyje ir atsisiųskite kopiją. Jūs galite jį paleisti ir veikti ne kartą.