Cuộn toàn trang mượt mà với Plugin jQuery viewScroller.js

Hiệu ứng cuộn JavaScript đã tồn tại trong nhiều năm với hàng tá thư viện tuyệt vời để lựa chọn. Nhưng một ứng cử viên mới trong lĩnh vực này là viewScroller.js.

Thư viện rất nhỏ nhưng mạnh mẽ này có thể xây dựng bố cục một trang cái đó cuộn dưới dạng khối với một lần vuốt của bánh xe cuộn (hoặc bàn di chuột). Điều này tạo ra một bố cục được kiểm soát trong đó các cuộn di chuyển người dùng qua các phần riêng lẻ của một trang với độ chính xác chặt chẽ pixel.

Đương nhiên, đây là một thư viện hoàn toàn miễn phí có sẵn trên GitHub và dễ cài đặt với Bower hoặc npm.

Tuy nhiên, viewScroller.js là không phải một thư viện JavaScript độc lập. Nó dựa vào jQuery và hai plugin cụ thể: Chuột Chuột jQuery và Dễ dàng sử dụng jQuery. đó là cả hai yêu cầu để có được các hiệu ứng cuộn hoạt động đúng.

Điều này có thể cản trở giá trị của viewScroller vì nó yêu cầu một vài thư viện JS chỉ để hoạt động. Nhưng nếu bạn đã sử dụng jQuery bằng mọi giá thì đó là điều không tưởng. viewScroller.js cung cấp phương thức đơn giản nhất để có được một ứng dụng web cuộn trang đơn chạy mà không cần nhiều mã.

Nó có, tuy nhiên, sử dụng các lớp và ID rất chi tiết để tạo hiệu ứng cuộn. Bạn có thể chỉnh sửa các lớp này trong tệp CSS của riêng bạn hoặc ghi đè lên chúng trong mã cơ sở. Bạn sẽ tìm thấy một danh sách đầy đủ trên trang repo với tên lớp và dữ liệu thiết lập mặc định.

Cách đơn giản nhất để bắt đầu là nhân bản các bản trình diễn viewScroller. Họ có một cái với một thanh bên phải, một cái khác có một thanh bên trái và một cái có hai thanh bên kẹp nội dung ở giữa.

Nếu bạn ổn với một ứng dụng web sử dụng jQuery, thì viewScroller là một thư viện miễn phí tuyệt vời để sử dụng. Nó cần khá nhiều phụ thuộc nhưng họ không nên khó cấu hình.

Hãy nhìn vào bản thử trực tiếp và xem những gì bạn nghĩ. Nếu bạn thích UX và hành vi cuộn thì hãy làm theo hướng dẫn thiết lập trên GitHub để bắt đầu.