Share Tạo hiệu ứng cho nội dung khi cuộn trang với thư viện basicScroll

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Nếu các bạn muốn tạo hiệu ứng cho nội dung trang web khi cuộn trang tương tự như parallax thì các bạn có thể sử dụng thư viện basicScroll. Thư viện basicScroll được viết bằng JavaScript với chức năng trình diễn các hiệu ứng chuyển động hoạt hình khi người dùng cuộn trang. Mặc dù hiệu ứng nội dung khi cuộn trang đã có nhiều thư viện hỗ trợ nhưng với thư viện basicScroll vẫn có nét riêng giúp cho việc tạo hiệu ứng chuyển động hoạt hình trở nên khác biệt so với các thư viện khác.

Để sử dụng thư viện basicScroll, các bạn tải tại địa chỉ https://github.com/electerious/basicScroll và tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<script src="path/to/basicScroll.min.js"></script>
Các bạn tạo thành phần HTML như sau:
HTML:
<div class="basic-scroll">Welcome to Gextend</div>
Bây giờ, các bạn cài đặt thư viện basicScroll với nội dung JavaScript như sau:
JavaScript:
//Khai báo cài đặt
var basicScroll = basicScroll.create({
    elem: document.querySelector('.basic-scroll'),
    from: 'top-top',
    to: 'bottom-bottom',
    direct: true,
    props: {
        '--r': {
            from: '0',
            to: '1turn'
        },
        '--tx': {
            from: '-100px',
            to: '100px'
        }
    }
});

//Chạy hiệu ứng
basicScroll.start();
Các bạn có thể tìm hiểu thêm về thư viện basicScroll tại địa chỉ https://basicscroll.electerious.com.
 
Back
Top