Share Thiết kế tính năng cuộn trang với thư viện fullPage.js

filiallion · 07/31/2018

Thư viện fullPage.js là một tiện ích dựa trên nền tảng jQuery, cho phép các bạn xây dựng những website cuộn đơn trang theo chiều dọc hoặc chiều ngang. Thư viện fullPage.js được tạo ra bởi Alvaro Trigo và được cung cấp tài liệu hướng dẫn sử dụng rất chi tiết giúp các bạn không có nhiều kinh nghiệm trong lập trình JavaScript cũng có thể cài đặt, cấu hình dễ dàng.

Để sử dụng thư viện fullPage.js, các bạn cần phải tích hợp thư viện jQuery vào website và truy cập địa chỉ https://github.com/alvarotrigo/fullpage.js để tải thư viện fullPage.js cũng như xem ví dụ tại địa chỉ https://alvarotrigo.com/fullPage/#examples.

Các bạn tích hợp thư viện fullPage.js vào website với nội dung mã lệnh như sau:

HTML:

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

Và cài đặt thư viện với nội dung mã lệnh như sau:

JavaScript:

$(function() {
    $('#fullpage').fullpage({
        autoScrolling: true,
        scrollHorizontally: true
    });
});

Các bạn tạo các trang cuộn với nội dung HTML như sau:

HTML:

<div id="fullpage">
    <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 fullPage.js tại địa chỉ https://github.com/alvarotrigo/fullPage.js/#fullpagejs.

Share Thiết kế tính năng cuộn trang với thư viện fullPage.js

filiallion

Administrator