Tạo hộp đèn toàn trang đáp ứng và đẹp mắt với BaguetteBox.js

Có hàng tá plugin hộp đèn và tất cả họ đều tuyệt vời vì các lý do khác nhau. Một số hoạt động tốt hơn trên các trang web danh mục đầu tư trong khi một số khác là tốt nhất cho bố trí đáp ứng.

Nhưng, một trong những plugin mới yêu thích của tôi để sử dụng là baguetteBox.js, được tạo bởi nhà phát triển JavaScript Marek Grzybek.

Tất nhiên, plugin này hoàn toàn miễn phí để sử dụng và có nguồn mở trên GitHub nếu bạn muốn tìm hiểu mã theo cách thủ công.

Thư viện không có bất kỳ sự phụ thuộc, vì vậy bạn có thể chạy nó mà không cần jQuery, Zepto hoặc bất cứ thứ gì khác. nó là một thư viện JavaScript thuần với thiết lập thực sự đơn giản.

Nó có nghĩa là hoạt động hoàn hảo trên thiết bị di động, do đó, nó có thể hỗ trợ các thao tác vuốt và chạm, cùng với hành vi mặc định trên máy tính để bàn và máy tính xách tay. Đây là một trong số ít phòng trưng bày toàn màn hình hỗ trợ các tương tác di động, cùng với hiệu ứng phương thức đầy đủ.

Kiểm tra trang demo để xem nó sống trong hành động. Nó có một bộ sưu tập đầy đủ tính năng, cùng với một dòng mã cần thiết để làm cho nó hoạt động:

 baguetteBox.run ('. baguetteBoxOne'); 

Vì vậy, cái này nhắm mục tiêu một phần tử container với lớp .baguetteBoxOne và toàn bộ phòng trưng bày.

Bạn có thể đặt tùy chọn tùy chỉnh nếu bạn muốn những thứ như chú thích, kiểu nút, tính năng tải trước và phương thức gọi lại cho các sự kiện onclick / onchange. Tất cả các tùy chọn này là tài liệu tốt trên GitHub nếu bạn muốn lặn trong.

Nhưng, thực sự không mất nhiều thời gian để vượt qua yếu tố chứa và một số yếu tố hình ảnh cơ bản.

Bạn có toàn quyền kiểm soát qua hình động, kích thước hình ảnh, hiệu ứng vuốt và nội dung thư viện, chẳng hạn như tiêu đề / chú thích. Điều này không yêu cầu JavaScript, vì vậy nó không có một CSS thay thế thuần túy cho phương thức. Nhưng, vì hầu hết các trình duyệt đều hỗ trợ JavaScript nên nó không phải là vấn đề.

Để tìm hiểu thêm, hãy truy cập trang chính của baguetteBox.js và bạn cũng có thể chia sẻ suy nghĩ của mình với người tạo trên Twitter @feimosi.