Thêm hiệu ứng phóng đại trên trang web của bạn với jfMagnify
Có rất nhiều plugin phóng to miễn phí làm việc rất tốt Tuy nhiên, hầu hết trong số này là được xây dựng cho hình ảnh và họ chỉ định hướng cho nội dung chỉ hình ảnh.
Nếu bạn có thể thêm hiệu ứng phóng đại đến mọi phần của trang web của bạn? Nhờ vào jfMagnify, bạn có thể.
nó là một plugin jQuery miễn phí không chỉ thu phóng hình ảnh mà còn hỗ trợ thu phóng toàn bộ trang. Đây là một trong số ít các plugin cũng cho phép bạn chọn mức độ phóng đại và hỗ trợ các sự kiện chạm cho người dùng di động.
Lưu ý plugin này có thể cảm thấy hơi nặng nề vì nó phụ thuộc vào hai phụ thuộc: jQuery thông thường và Giao diện người dùng jQuery. Cả hai đều cần thiết để jfMagnify hoạt động đúng. Không đề cập đến tập lệnh jfMagnify thực tế bạn sẽ cần đưa vào trang của bạn.
Việc thiết lập hơi phức tạp vì bạn chỉ có thể nhắm mục tiêu các yếu tố phóng to trong một container. Nếu bạn muốn nhắm mục tiêu toàn bộ trang, bạn sẽ cần bao gồm một lớp học trên toàn bộ trang web của bạn.
Đây là cách một dòng duy nhất của jQuery sẽ trông như:
$ (". phóng đại"). jfMagnify (); Mục tiêu này tất cả các yếu tố bên trong .phóng đại thùng đựng hàng thường là một div thành phần.
Những yếu tố bên trong có thể là hình ảnh, nhưng cũng có thể bao gồm in nhỏ, ví dụ về các điều khoản trang web hoặc các trang chính sách bảo mật. Tất cả các tài liệu là có sẵn trong repo GitHub, Vì vậy, một khi bạn thiết lập nó, toàn bộ quá trình trở nên dễ dàng hơn rất nhiều.
Ngoài ra, plugin này rất hay thay đổi và đi kèm với rất nhiều quy tắc container. Ví dụ: phần tử container không thể có vị trí CSS tĩnh, vì vậy nó cần phải tương đối, tuyệt đối hoặc cố định.
Bạn có thể tìm tất cả các quy tắc kiểu mặc định trong repo GitHub nhưng có thể hơi khó tùy chỉnh nếu bố cục của bạn đã được xây dựng và chạy. Những lợi ích của jfMagnify, đối với tôi, đáng để nỗ lực. Thực sự, nó phụ thuộc vào nhu cầu của bạn và bạn có thích giao diện không.
Hãy xem qua các tài liệu trên GitHub để xem bạn nghĩ gì. Và, bạn cũng có thể xem trước giao diện trên CodePen nếu bạn muốn xem thư viện hoạt động trước khi cài đặt nó.
