Philter.js - Δωρεάν βιβλιοθήκη αλλαγής εικόνων χρησιμοποιώντας φίλτρα CSS

Ίνσταγκραμ είναι ευρέως γνωστό ως το πιο δημοφιλές δίκτυο φωτογραφιών. Διαχειρίζεται πάνω από 52 εκατομμύρια φωτογραφίες την ημέρα και πολλές από αυτές περιλαμβάνουν φίλτρα που μεταβάλλουν τις εικόνες σε κίνηση.

Αυτό είναι επίσης δυνατό χρησιμοποιώντας φίλτρα CSS τα οποία εφαρμόστε απευθείας στο πρόγραμμα περιήγησης. Αυτές οι ιδιότητες προσαρμοσμένων φίλτρων έχουν ευρεία υποστήριξη σε πολλά προγράμματα περιήγησης και φαίνονται εξαιρετικά.

Με το Το plugin του Philter JavaScript, μπορείτε να κλιμακώσετε αυτήν τη διαδικασία για να εξοικονομήσετε χρόνο και να μετακινήσετε τον κώδικα σας σε HTML για δυναμικά εφέ φιλτραρίσματος.

Χρησιμοποιώντας αυτό το plugin, κερδίζετε πολύ μεγαλύτερο έλεγχο των εικόνων σας. Με αυτόν τον τρόπο μπορείτε να επιλέξετε τα φίλτρα που θέλετε να εφαρμόσετε σε μεμονωμένες εικόνες και αν ορισμένα φίλτρα πρέπει να αλλάξουν με βάση τη συμπεριφορά των χρηστών, όπως η τοποθέτηση του ποντικιού.

CSS υποστηρίζει κινούμενες μεταβάσεις και ο Philter κάνει αυτή τη διαδικασία πολύ απλή. Απλώς κατεβάστε το Philter από την αρχική σελίδα ή από το repo GitHub. Μόλις προστεθεί στην ιστοσελίδα σας, απλά προσθέστε τον κωδικό προετοιμασίας και αφήστε το να πάει.

Εδώ είναι α δείγμα δείγματος από το repo GitHub:

Από προεπιλογή, μπορείτε να ρυθμίσετε μεταβάσεις και πρόσθετα χαρακτηριστικά δεδομένων που μπορείτε να προσθέσετε σε HTML. ο url η παράμετρος καθορίζει τη διαδρομή στην οποία πρέπει να αναζητήσει το Philter προσαρμοσμένα αρχεία SVG που χρησιμοποιούνται στη διαδικασία φιλτραρίσματος.

Αυτά τα επιπλέον φίλτρα είναι συσκευασμένα με τη βιβλιοθήκη, έτσι δεν χρειάζεται να τα επεξεργαστείτε καθόλου. Αλλά, μπορείτε να τα μετακινήσετε ή να τα τοποθετήσετε σε μια διαφορετική δομή καταλόγου από το τρέχον αρχείο σας, έτσι ώστε αυτή η ρύθμιση μπορεί να χρειαστεί να τροποποιηθεί.

Τώρα, μπορείτε απλά προσθέστε προσαρμοσμένα φίλτρα δικαίωμα στο HTML σας στοιχεία ή τα δοχεία τους.

Εδώ είναι α απλό παράδειγμα:

Μπορείτε να βρείτε ένα πλήρη λίστα όλων των φίλτρων στο GitHub, μαζί με ένα πλήρης οδηγός εγκατάστασης και πολλά άλλα δείγματα κώδικα.

Ο Philter είναι ένα από τα πιο cool δωρεάν plugins γύρω και ωθεί τα όρια του σύγχρονου CSS. Μπορείτε ακόμη και σχεδιάστε τα δικά σας φίλτρα εάν είστε διατεθειμένοι να σκάψετε μέσα στον κώδικα και να πετάξετε γύρω.

Για ένα απλό μέρος για να ξεκινήσετε, απλώς επισκεφθείτε την αρχική σελίδα του Philter και κατεβάστε ένα αντίγραφο. Μπορείτε να το κάνετε σε λειτουργία χωρίς καθυστέρηση.