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

filiallion

Administrator
Staff member
Administrator
Messages
341
Points
10
Language
Tiếng Việt
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>
 
Top