Philter.js - Thư viện thay đổi hình ảnh miễn phí bằng bộ lọc CSS
Instagram được biết đến rộng rãi như là mạng ảnh phổ biến nhất. Nó xử lý hơn 52 triệu ảnh mỗi ngày và nhiều người trong số họ bao gồm các bộ lọc làm thay đổi hình ảnh khi đang bay.
Điều này cũng có thể sử dụng các bộ lọc CSS áp dụng trực tiếp trong trình duyệt. Các thuộc tính bộ lọc tùy chỉnh này có hỗ trợ rộng rãi trên nhiều trình duyệt và chúng trông tuyệt vời.
Với Plugin Philter JavaScript, bạn có thể mở rộng quy trình này để tiết kiệm thời gian và chuyển mã của mình sang HTML cho hiệu ứng lọc động.
Bằng cách sử dụng plugin này, bạn có được kiểm soát nhiều hơn đối với hình ảnh của bạn. Bằng cách này, bạn có thể chọn bộ lọc nào bạn muốn áp dụng cho từng hình ảnh và nếu một số bộ lọc nhất định sẽ thay đổi dựa trên hành vi của người dùng, chẳng hạn như di chuột.
CSS hỗ trợ chuyển cảnh và Philter làm cho quá trình này thực sự đơn giản. Bạn chỉ cần tải xuống Philter từ trang chủ hoặc từ repo GitHub. Khi nó được thêm vào trang web của bạn, bạn chỉ cần thêm mã khởi tạo và để nó đi.
Đây là một đoạn trích mẫu từ repo GitHub:
Theo mặc định, bạn có thể thiết lập chuyển tiếp và các thuộc tính dữ liệu bổ sung bạn có thể nối thêm vào HTML. Các url tham số xác định đường dẫn mà Philter sẽ tìm kiếm các tệp SVG tùy chỉnh được sử dụng trong quá trình lọc.
Những bộ lọc bổ sung là đóng gói với thư viện, Vì vậy, bạn không cần phải chỉnh sửa chúng. Nhưng, bạn có thể di chuyển chúng xung quanh hoặc đặt chúng vào một cấu trúc thư mục khác với tệp hiện tại của bạn, vì vậy cài đặt này có thể cần phải được thay đổi.
Bây giờ, bạn có thể thêm bộ lọc tùy chỉnh đúng với HTML của bạn
Đây là một ví dụ đơn giản:
Bạn có thể tìm thấy một danh sách đầy đủ của tất cả các bộ lọc trên GitHub, cùng với một hoàn thành hướng dẫn thiết lập và nhiều mẫu mã khác.
Philter là một trong những plugin miễn phí thú vị nhất và nó đẩy các giới hạn của CSS hiện đại. Bạn có thể thiết kế bộ lọc của riêng bạn nếu bạn sẵn sàng đào sâu vào codebase và tinker.
Đối với một nơi đơn giản để bắt đầu, chỉ cần truy cập trang chủ Philter và tải xuống một bản sao. Bạn có thể tải nó lên và chạy ngay lập tức.
