AOS (Animate On Scroll) là một thư viện JavaScript mạnh mẽ, cho phép bạn tạo ra các hiệu ứng cuộn (scrolling effects) ấn tượng và sinh động cho trang web của mình. Với khả năng hoạt động mượt mà và dễ dàng tích hợp, AOS đã trở thành một trong những lựa chọn hàng đầu cho các nhà phát triển web muốn nâng cao trải nghiệm người dùng. Thư viện này hỗ trợ nhiều kiểu hiệu ứng như xuất hiện, biến mất, phóng to và thu nhỏ, giúp nội dung trở nên hấp dẫn hơn khi người dùng cuộn trang.
Một điểm mạnh của AOS là tính đơn giản trong việc sử dụng; bạn chỉ cần thêm một vài dòng mã vào dự án của mình và cấu hình các thuộc tính để áp dụng các hiệu ứng mong muốn. AOS không chỉ mang lại sự sinh động cho trang web, mà còn giúp tăng cường khả năng tương tác giữa người dùng và nội dung. Đặc biệt, với sự tối ưu hóa cho SEO, việc sử dụng AOS không làm ảnh hưởng đến tốc độ tải trang, góp phần cải thiện thứ hạng tìm kiếm của website. Hãy Quicksite cùng khám phá cách AOS có thể biến đổi giao diện của bạn!
Lịch sử phát triển của AOS
AOS (Animate On Scroll) là một thư viện JavaScript được phát triển bởi Michal Snik, ra mắt lần đầu vào năm 2014. Mục tiêu của AOS là cung cấp một cách đơn giản để thêm hiệu ứng cuộn cho các phần tử trên trang web, tạo ra trải nghiệm người dùng thú vị hơn. Ngay từ những ngày đầu, AOS đã nhận được sự chú ý từ cộng đồng phát triển nhờ vào tính năng dễ sử dụng và khả năng tùy chỉnh linh hoạt.
Kể từ khi phát hành, AOS đã trải qua nhiều bản cập nhật để cải thiện hiệu suất và bổ sung tính năng mới. Phiên bản 2.0, phát hành vào năm 2017, đã mang đến nhiều cải tiến về tốc độ và khả năng tương thích với các trình duyệt khác nhau. AOS đã trở thành một công cụ phổ biến trong việc thiết kế giao diện người dùng, được sử dụng rộng rãi trong các dự án web và ứng dụng.
Với sự phát triển không ngừng, AOS hiện đã thu hút hàng nghìn sao trên GitHub và trở thành lựa chọn hàng đầu cho các nhà phát triển muốn mang lại sự sinh động cho trang web của họ. Sự ủng hộ tích cực từ cộng đồng đã giúp AOS duy trì vị thế trong lĩnh vực phát triển web.
Lưu ý: đây là thư viện cổ điển, nên khi bạn dùng nó thì hãy delay để tránh Google Page Speed báo lỗi nhé! Bạn có thể dùng Perfmatters để Delay JS!
Hướng dẫn cài đặt AOS JS cho child theme WordPress
Kích hoạt thư viện AOS
Nguyên lý hoạt động trên trang là cần có AOS CSS, AOS JS và File JS để kích hoạt thư viện hoạt động trên trang!
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>Về phần cài đặt thủ công thì cách làm cũng tương tự SAL JS: QS • SAL JS thư viện hiệu ứng siêu nhẹ cho tín đồ tối ưu tốc độ (quicksite.vn) – tôi đã hướng dẫn ở phần trước.
Ví dụ bên trong thư mục child theme này, hãy tạo một thư mục con tên là “aos” (hoặc tên khác tùy ý).
function quicksite_enqueue_aos_scripts() {
wp_enqueue_style( 'aos', get_stylesheet_directory_uri() . '/aos/aos.css' );
wp_enqueue_script( 'aos', get_stylesheet_directory_uri() . '/aos/aos.js', array(), false, true );
wp_enqueue_script( 'aos-init', get_stylesheet_directory_uri() . '/aos/aos-init.js', null, null, true );
}
add_action( 'wp_enqueue_scripts', 'quicksite_enqueue_aos_scripts' );Và trong file Aos-init.js thì hãy khởi động thư viện!
AOS.init();Ngoài ra bạn cũng có thể tùy chỉnh:
AOS.init({
// Cài đặt toàn cục:
disable: false, // chấp nhận các giá trị sau: 'phone', 'tablet', 'mobile', boolean, biểu thức hoặc hàm
startEvent: 'DOMContentLoaded', // tên sự kiện được phát trên tài liệu, mà AOS sẽ khởi tạo
initClassName: 'aos-init', // lớp được áp dụng sau khi khởi tạo
animatedClassName: 'aos-animate', // lớp được áp dụng khi có hoạt ảnh
useClassNames: false, // nếu đúng, sẽ thêm nội dung của `data-aos` dưới dạng lớp khi cuộn
disableMutationObserver: false, // vô hiệu hóa phát hiện tự động các biến đổi (nâng cao)
debounceDelay: 50, // độ trễ trên debounce khi thay đổi kích thước cửa sổ (nâng cao)
throttleDelay: 99, // độ trễ trên throttle khi cuộn trang (nâng cao)
// Cài đặt có thể được ghi đè trên từng phần tử, thông qua các thuộc tính `data-aos-*`:
offset: 120, // độ lệch (tính bằng px) từ điểm kích hoạt ban đầu
delay: 0, // giá trị từ 0 đến 3000, với bước 50ms
duration: 400, // giá trị từ 0 đến 3000, với bước 50ms
easing: 'ease', // độ trơn mặc định cho các hoạt ảnh AOS
once: false, // liệu hoạt ảnh có chỉ xảy ra một lần - khi cuộn xuống
mirror: false, // liệu các phần tử có nên hoạt ảnh ra ngoài khi cuộn qua chúng
anchorPlacement: 'top-bottom', // xác định vị trí nào của phần tử so với cửa sổ sẽ kích hoạt hoạt ảnh
});Nếu bạn dùng plugin lưu code như WPCodebox thì sẽ đơn giản hơn một chút! Tôi sẽ hướng dẫn thêm cho WPCodebox.
Tạo File JS, chép thư viện AOS JS đã tải vào và dùng code này để khởi động!
Chọn chế độ External File và Defer trong WPCodebox!
AOS.init();Tạo File CSS và chép thư viện AOS CSS vào! Cũng chọn External File!
Rồi như vậy là xong đến bước kế tiếp!
Sử dụng AOS với GenerateBlocks Pro
Tương tự như SAL JS đã hướn dẫn ở phần trước! Bạn cũng có thể làm với plugin GenerateBlocks Pro!
Trang DEMO: https://itstartup.net
Nguyên lý hoạt động căn bản:
<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
>
</div>Sau khi cài theo hướng dẫn, bây giờ bạn có thể bắt đầu thêm các thuộc tính tùy chỉnh vào các khối chứa mà bạn muốn thực hiện hiệu ứng hoạt hình. Để thêm thuộc tính, hãy chọn khối chứa và cuộn xuống phần Advanced ở bên phải. Mở rộng phần này và bắt đầu thêm các cặp giá trị thuộc tính (attribute-value). Đối với hình ảnh đầu tiên và văn bản nằm dưới vùng nhìn thấy, tôi đã thêm những thuộc tính sau vào các khối chứa:
Container bên trái
| Attribute | Value |
|---|---|
| data-aos | slide-right |
| data-aos-easing | easeInOutSine |
| data-aos-duration | 800 |
Container bên phải
| Attribute | Value |
|---|---|
| data-aos | slide-left |
| data-aos-easing | easeInOutSine |
| data-aos-duration | 800 |
| data-aos-delay | 100 |
Lưu ý độ trễ nhẹ được thêm vào thuộc tính data-aos-delay để làm cho khối chứa bên phải cuộn vào với một chút độ trễ. Tôi đã sử dụng chính xác các cài đặt giống nhau cho các nhóm hình ảnh và văn bản tiếp theo.
Đối với các hộp biểu tượng ở dưới cùng, tôi đã sử dụng các cặp thuộc tính – giá trị sau:
Container đầu tiên
| Attribute | Value |
|---|---|
| data-aos | slide-up |
| data-aos-easing | easeInOutSine |
| data-aos-duration | 800 |
Container thứ 2
| Attribute | Value |
|---|---|
| data-aos | slide-up |
| data-aos-easing | easeInOutSine |
| data-aos-duration | 800 |
| data-aos-delay | 100 |
Container thứ 3
| Attribute | Value |
|---|---|
| data-aos | slide-up |
| data-aos-easing | easeInOutSine |
| data-aos-duration | 800 |
| data-aos-delay | 200 |
Một lần nữa, hãy lưu ý đến sự chậm trễ nhẹ giữa các giá trị góp phần vào việc các phần tử không cuộn lên cùng một lúc chính xác.
Cuối cùng, cho phần kêu gọi hành động (đăng kí nhận tin) ở dưới cùng, bạn nên sử dụng các cặp thuộc tính – giá trị sau.
| Attribute | Value |
|---|---|
| data-aos | fade |
| data-aos-easing | easeInOutSine |
| data-aos-duration | 1000 |
Các hiệu ứng hoạt hình của AOS
Thư viện AOS (Animate On Scroll) cung cấp nhiều hiệu ứng hoạt hình đẹp mắt để làm nổi bật nội dung khi cuộn trang. Dưới đây là các loại hiệu ứng hoạt hình chính mà bạn có thể sử dụng:
Hiệu ứng Fade
- fade: Hiệu ứng mờ dần.
- fade-up: Mờ dần từ dưới lên.
- fade-down: Mờ dần từ trên xuống.
- fade-left: Mờ dần từ trái sang phải.
- fade-right: Mờ dần từ phải sang trái.
- fade-up-right: Mờ dần từ dưới lên và sang phải.
- fade-up-left: Mờ dần từ dưới lên và sang trái.
- fade-down-right: Mờ dần từ trên xuống và sang phải.
- fade-down-left: Mờ dần từ trên xuống và sang trái.
Hiệu ứng Flip
- flip-up: Lật lên.
- flip-down: Lật xuống.
- flip-left: Lật sang trái.
- flip-right: Lật sang phải.
Hiệu ứng Slide
- slide-up: Trượt lên.
- slide-down: Trượt xuống.
- slide-left: Trượt sang trái.
- slide-right: Trượt sang phải.
Hiệu ứng Zoom
- zoom-in: Phóng to vào.
- zoom-in-up: Phóng to vào từ dưới lên.
- zoom-in-down: Phóng to vào từ trên xuống.
- zoom-in-left: Phóng to vào từ trái sang phải.
- zoom-in-right: Phóng to vào từ phải sang trái.
- zoom-out: Thu nhỏ ra.
- zoom-out-up: Thu nhỏ ra từ dưới lên.
- zoom-out-down: Thu nhỏ ra từ trên xuống.
- zoom-out-left: Thu nhỏ ra từ trái sang phải.
- zoom-out-right: Thu nhỏ ra từ phải sang trái.
Vị trí gắn kết
- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top
Hàm Easing
AOS cũng hỗ trợ nhiều hàm easing để tăng cường trải nghiệm người dùng:
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart
Sử dụng thư viện AOS để tạo ra những trải nghiệm tương tác thú vị cho người dùng. Khám phá ngay hôm nay để nâng cao giao diện trang web của bạn!
Chúc bạn thiết kế web và lập trình vui vẻ!
