Xây dựng hiệu ứng cuộn trang của riêng bạn với Roll.js
Bạn có thể tìm thấy hàng tá thư viện cuộn trên web. Hầu hết được viết bằng JavaScript và có các hiệu ứng riêng, bạn có thể sắp xếp lại cho bố cục trang đơn, hoạt hình trên cuộn và hơn thế nữa.
Nhưng những gì về mã hóa các hiệu ứng cuộn của riêng bạn? Hoặc nếu bạn chỉ muốn một cách đơn giản để theo dõi trang người dùng đã cuộn xuống bao xa?
Roll.js là thư viện bạn đang tìm kiếm. Điều này tập lệnh mã nguồn mở rất nhỏ và siêu dễ sử dụng. Bạn có thể làm việc này với một vài dòng JavaScript. Và tốt nhất là nó không buộc bạn phải thực hiện bất cứ điều gì cụ thể, mà là cung cấp cho bạn các công cụ để tạo các tính năng cuộn tùy chỉnh của riêng bạn.
Mục tiêu của thư viện này là giúp các nhà phát triển cấu trúc các hiệu ứng cuộn của họ mà không cần nỗ lực nhiều.
Nếu bạn xem repo GitHub chính, bạn sẽ tìm thấy toàn bộ hướng dẫn thiết lập với một vài đoạn ví dụ. Bạn có thể chạy các chức năng để gọi người dùng cuộn bao xa, hoặc khác “tấm” trên trang.
Chúng hoạt động tốt nhất trên bố cục một trang nhưng bạn có thể sử dụng Roll.js rất nhiều.
Với một cuộc gọi chức năng duy nhất, bạn có thể kéo dữ liệu với mỗi cuộn bao gồm:
- Tổng số bước trang (nếu có).
- Tổng số% cuộn xuống trang.
- Vị trí hiện tại trên trang tính bằng pixel.
- Tổng chiều cao khung nhìn dựa trên kích thước thiết bị.
Điều này cũng hoạt động với các liên kết nhảy đưa người dùng xuống (hoặc lên) đến các phần nhất định của trang.
Nhưng bạn cũng có thể tìm thấy rất nhiều các tính năng này trong các thư viện khác. Điều gì làm cho Roll.js trở nên đặc biệt?
Một phần của nó là cú pháp, nhưng người bán lớn ở đây là tổng kích thước thư viện của 8KB khi rút gọn. Đó là khá nhỏ cho một thư viện cuộn chi tiết như vậy!
Bạn có thể thấy cách thức hoạt động trên trang demo chính và thậm chí bạn có thể tải xuống mã nguồn Roll.js để tự đào sâu vào các bản demo đó.
Mọi thứ từ các bản demo trực tiếp và các tệp thư viện thô có thể được lấy từ GitHub và chúng rất dễ làm việc với.
Nhưng nếu bạn có bất kỳ câu hỏi, đề xuất hoặc muốn chia sẻ lời cảm ơn về thư viện tuyệt vời này, bạn có thể gửi tin nhắn cho người tạo @williamngan.
