Share Tạo trang one page cuộn trang với thư viện One Page Scroll

filiallion · 08/31/2018

Với tính năng cuộn trang tôi có hướng dẫn các bạn sử dụng thư viện jInvertScroll để thực hiện hiệu ứng này, các bạn có thể tham khảo bài viết "Cuộn trang parallax với thư viện jInvertScroll" để biết chi tiết. Ở bài viết này, tôi cũng sẽ hướng dẫn các bạn tạo một trang one page với tính năng cuộn trang theo chiều dọc mà các bạn thường thấy trên các trang one page và thư viện tôi dùng để hướng dẫn các bạn là thư viện One Page Scroll được viết dựa trên nền tảng jQuery.

Trước tiên các bạn cần tích hợp thư viện jQuery vào website, sau đó truy cập địa chỉ https://github.com/peachananr/onepage-scroll để tải thư viện One Page Scroll và tích hợp vào website với nội dung mã lệnh như sau:

HTML:

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

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

JavaScript:

$('.onepage-scroll').onepage_scroll({
    sectionContainer: 'section',
    easing: 'ease',
    animationTime: 1000,
    pagination: true,
    keyboard: true
});

Và áp dụng hiệu ứng cuộn trang như ví dụ sau:

HTML:

<div class="onepage-scroll">
    <section>Section 1</section>
    <section>Section 2</section>
    <section>Section 3</section>
</div>

Share Tạo trang one page cuộn trang với thư viện One Page Scroll

filiallion

Administrator