- 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:
Các bạn tạo thành phần HTML như sau:
Bây giờ, các bạn cài đặt thư viện basicScroll với nội dung JavaScript như sau:
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.
Để 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>
HTML:
<div class="basic-scroll">Welcome to Gextend</div>
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();