Share Tạo hiệu ứng cuộn trang với thư viện pagePiling.js

filiallion · 09/04/2018

Tiếp tục với các thư viện cuộn trang, bài viết này tôi sẽ hướng dẫn các bạn sử dụng thư viện pagePiling.js được viết dựa trên jQuery tạo ra hiệu ứng cuộn trang đẹp mắt cho website của các bạn chỉ với vài dòng mã lệnh cài đặt đơn giản.

Cũng giống như các thư viện được viết trên nền tảng jQuery khác, đó là các bạn phải tích hợp thư viện jQuery vào website trước khi sử dụng thư viện pagePiling.js. Sau khi thư viện jQuery được tích hợp vào website, các bạn truy cập địa chỉ https://github.com/alvarotrigo/pagePiling.js để tải thư viện pagePiling.js và tích hợp vào website với nội dung mã lệnh như sau:

HTML:

<link href="path/to/jquery.pagepiling.min.css" rel="stylesheet">
<script src="path/to/jquery.pagepiling.min.js"></script>

Các bạn cài đặt thư viện pagePiling.js với nội dung mã lệnh như sau:

JavaScript:

$(function() {
    $('#page-piling').pagepiling();
});

Sau đó, các bạn trình bày các trang cần cuộn như ví dụ sau:

HTML:

<div id="page-piling">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
</div>

Các bạn có thể tìm hiểu thêm về thư viện pagePiling.js tại địa chỉ https://github.com/alvarotrigo/pagePiling.js.

Share Tạo hiệu ứng cuộn trang với thư viện pagePiling.js

filiallion

Administrator