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ụ:

Xem thêm các bài hướng dẫn tại đây