Tạo hiệu ứng khi Scroll web
Tác giả: Dương Nguyễn Phú Cường
Ngày đăng: 8 giờ trước
Lượt xem: 33
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