aos.js cho phép bạn tạo các hiệu ứng đẹp mắt cho website của mình khi cuộn chuột xuống và lên. Nó cũng giống như thư viện wow.js, nhưng có một đặc điểm là khi bạn cuộn chuột qua thì các hiệu ứng sẽ trở về trạng thái chưa xảy ra và sẵn sàng chạy lại khi bạn cuộn chuột đến nó.
Cài đặt aos.js
Trước hết để sử dụng được thư viện này chúng ra phải download thư viện jquery về đã.
Sau đó chúng ta vào đây download thư viện của nó ở cuối trang. Các bạn giải nén ra rồi vào thư mục dist lấy 2 file aos.css và aos.js ra (chúng ta dùng 2 file này là đủ).
Sau đây là folder code của tớ:
Các bạn tạo folder theo như hình trên. Thư viện jquery bạn dùng bản nào cũng được nhưng nhớ để vị trí như hình và dẫn link đúng tên nha 🙂
Các bạn mở file index.html ra và thêm link 3 file trên vào thẻ head như sau:
Bắt đầu với aos.js
Để kích hoạt aos.js chúng ta code như sau
Ở những phần tử bạn muốn chạy hiệu ứng thì code như sau :
+ data-aos=”fade-right” là tên hiệu ứng.
Bạn vào đây sẽ thấy có rất nhiều hiệu ứng đẹp mắt, bạn thích cái nào thì lấy tên của nó về :).
+ data-aos-delay=”500″ là sau 500ms sẽ bắt đầu chạy hiệu ứng khi mình cuộn chuột đến.
+ data-aos-duration=”2000″ là tốc độ của hiệu ứng diễn ra nhanh hay chậm.
Đây là 3 thuộc tính đầy đủ và quan trọng nhất !
Đặc biệt : để vô hiệu hiệu ứng trên mobile thì chúng ta sửa đoạn mã kích hoạt như sau:
nếu bạn muốn vô hiệu nó ở khoảng màn hình nào thì sửa như sau:
ở đây là mình vô hiệu từ màn 0px – 1024px, window.innerWidth là đo chiều rộng cửa sổ trình duyệt.
Như vậy mình đã giới thiệu đến các bạn thư viện aos.js, một thư viện rất hay phải không nào. Cảm ơn các bạn và hẹn các bạn ở những bài hướng dẫn tiếp theo trong danh sách các bài học javascript, jquery.
admin
Xin chào, diendanhocweb.com là nơi mình sẽ chia sẻ những thủ thuật, kiến thức về website mà mình tìm hiểu được. Hy vọng, nó sẽ giúp ích cho mọi người.
