Share Tạo hiệu ứng cho các thành phần khi cuộn trang với thư viện AOS

[filiallion]

Language

Tiếng Việt

Thư viện AOS là một thư viện JavaScript được thiết kế với mục đích tạo hiệu ứng hoạt hình cho các thành phần trên website khi người dùng cuộn trang. Việc sử dụng thư viện rất đơn giản bằng cách khai báo các thuộc tính ngay trong các thẻ HTML của thành phần.

Trước hết, các bạn cần phải truy cập địa chỉ http://michalsnik.github.io/aos để tải thư viện AOS và sau đó các bạn tích hợp thư viện AOS vào website với nội dung mã lệnh như sau:

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

Các bạn cài đặt thư viện AOS với dòng mã lệnh JavaScript như sau:

AOS.init();

Và áp dụng các hiệu ứng cho các thành phần như ví dụ sau:

<div data-aos="fade-in">Gextend</div>

Các bạn có thể xem các ví dụ và tìm hiểu thêm về thư viện AOS tại địa chỉ http://michalsnik.github.io/aos.