Tạo hiệu ứng khi Scroll web
Tác giả: Dương Nguyễn Phú Cường
Ngày đăng: 4 năm trước
Bước 1:
- Download thư viện: https://github.com/michalsnik/aos
- Tích hợp vào file
index.html<!-- AOS --> <link rel="stylesheet" href="./../../assets/vendor/aos/aos.css" type="text/css" /> <!-- AOS --> <script src="./../../assets/vendor/aos/aos.js"></script>
Bước 2:
- Chỗ nào muốn sử dụng hiệu ứng khi Scroll, thêm các thuộc tính
data-aos="ten-hieu-ung" của thư viện AOS quy định- Ví dụ sau đây thêm hiệu ứng
data-aos="fade-left": cho hình ảnh hiện dần từ trái qua phải<div class="col-lg-4 text-center" data-aos="fade-left">
<img class="bd-placeholder-img rounded-circle" width="140" height="140"
src="./../../assets/img/icon-1.png">
<h2>Đặt hàng</h2>
<p>Chọn sản phẩm bạn yêu thích, và Đặt hàng.</p>
</div><!-- /.col-lg-4 -->
- Xem thêm các hiệu ứng tại trang chủ: https://github.com/michalsnik/aos#animations
Source code ví dụ:
- Link tại đây: https://github.com/kellyfire611/learning.nentang.vn-frontend-advanced/blob/master/tuts/animate-when-scroll-web/index.html