Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo hiệu ứng scroll bằng AOS

Tạo hiệu ứng scroll bằng AOS


Ngày 5 Tháng 2 Năm 2020

Tạo hiệu ứng scroll bằng AOS

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu đến các bạn một ứng dụng AOS giúp chúng ta tạo hiệu ứng với các thẻ HTML khi người dùng di chuyển chuột. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

Việc đầu tiên là mình sẽ tạo file có cấu trúc thư mục như sau:

Cấu Trúc AOS Scroll Libarary

Tiếp đến các bạn tải 2 file là aos.css và aos.js mà mình đã nén và để ở bên dưới để chép vào thư mục AOS_Scroll nhé:
Tải File AOS Scroll

Hoặc các bạn có thể sử dụng CDN link chỉ cần thêm vào file trang_chinh.html mà không cần tải file tập tin ở trên:

Sau đó tạo cấu trúc file HTML cho trang_chinh.html và tạo liên kết với trang aos.css và aos.js. Do để tạo những nội dung đẹp hơn thì mình sẽ sử dụng thêm Bootstrap4 cho trang HTML. Một lưu ý nhỏ là các bạn không cần phải tải file Bootrap4 về đâu vì mình sử dụng CDN link nên các bạn chỉ cần tạo file HTML giống bên dưới là có thể sử sụng được rồi. Các bạn xem đoạn code dưới đây để nắm rõ hơn nhé:

<!doctype html>
<html lang="en">
<head>
<title>AOS Scroll</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="aos.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="aos.js"></script>
</body>
</html>

Khi chèn đoạn code trên thì tiếp theo bạn cần thiết lập một đoạn mã Javascript để kích hoạt ứng dụng Javascript AOS để có thể sử dụng thư viện AOS bằng đoạn code dưới đây:

 <script>
      AOS.init(); 
</script>

Sau khi thiết lập xong xuôi thì chúng ta chỉ cần chọn những thẻ HTML mà mình muốn thêm hiệu ứng chuyển động bằng cách chèn thuộc tính data-aos. Để hiểu rõ các bạn xem đoạn code sau đây nhé

<div data-aos="tên_chuyển_động">

Trước khi thêm hiệu ứng chuyển động thì các bạn cùng mình xem qua bảng miêu tả các thuộc tính quan trọng trong thư viện AOS để giúp chúng ta kết hợp những thuộc tính đó làm cho hiệu ứng sinh động hơn cũng như linh hoạt phát triển nhiều chuyển động theo mục đích của mình.

Tên Thuộc TínhMiêu Tả Thuộc Tính
data-aos-offsetGiúp chúng ta kích hoạt chuyển động sớm hơn hay muộn hơn thời gian mặc định.(Giá trị mặc định là 120px)
data-aos-durationThời gian của hiệu ứng chuyển động (theo ms)
data-aos-delayLà thời gian trì hoãn chuyển động (theo ms và nó phải nằm trong phạm vi là 50ms tới 3000ms)
data-aos-easingDùng để điều khiển chức năng thời gian tạo hiệu ứng chuyển động cho các đối tượng HTML khác nhau.

Nghe hơi khó hiểu nên chúng ta sẽ thêm đoạn code dưới đây vào trang_chinh.html với đối tượng HTML với 3 thuộc tính là data-aos="fade-zoom-in" data-aos-easing="ease-in-sine" data-aos-duration="2500" để xem hiệu ứng chuyển động giúp các bạn có thể hình dung rõ hơn:

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-12 text-justify shadow-lg p-4 mb-5 bg-white rounded" data-aos="fade-up-right">
            <h2 class="text-primary">Niềm Vui Lập Trình</h2>
            <h4 class="text-danger">data-aos="fade-up-right"</h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque, quidem quo placeat adipisci non
                cupiditate ducimus dolorum et iste numquam accusamus voluptas minima laudantium odit iure
                consectetur perferendis. Minima, aspernatur?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt laborum vero similique veniam
                dolores officia reiciendis ea earum, distinctio molestias tenetur labore modi ullam esse
                necessitatibus libero harum dolorem magnam!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam labore vero sit nesciunt.
                Laboriosam fugiat recusandae labore officia, illo aliquam numquam inventore mollitia quidem
                consectetur, voluptates nihil sit repudiandae repellendus.
            </p>
        </div>
        <div class="col-md-6 col-sm-12"></div>
    </div>
<div class="row">
    <div class="col-md-6 col-sm-12"></div>
    <div class="col-md-6 col-sm-12 text-justify shadow-lg p-4 mb-5 bg-white rounded" data-aos="fade-up-left">
        <h2 class="text-primary">Niềm Vui Lập Trình</h2>
        <h4 class="text-danger">data-aos="fade-up-left"</h4>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque, quidem quo placeat adipisci non
            cupiditate ducimus dolorum et iste numquam accusamus voluptas minima laudantium odit iure consectetur perferendis. Minima, aspernatur?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt laborum vero similique veniam
            dolores officia reiciendis ea earum, distinctio molestias tenetur labore modi ullam essene
            cessitatibus libero harum dolorem magnam!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam labore vero sit nesciunt.
            Laboriosam fugiat recusandae labore officia, illo aliquam numquam inventore mollitia quidem
            consectetur, voluptates nihil sit repudiandae repellendus.
        </p>
    </div>
</div>
</div>

Khi thêm xong các bạn nhấn nút Refresh hoặc F5 sẽ có những hiệu ứng giống mình ở video dưới đây:

Sau khi gọi đến hiệu ứng chuyển động cơ bản thì tiếp theo mình sẽ thử thêm hai thuộc tính là data-aos-easing="ease-in-sine" và data-aos-duration="2500" vào hai đối tượng HTML để xem nó thay đổi như thế nào nhé:

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-12 text-justify shadow-lg p-4 mb-5 bg-white rounded" data-aos="fade-up-right" data-aos-easing="ease-in-sine" data-aos-duration="2500">
            <h2 class="text-primary">Niềm Vui Lập Trình</h2>
            <h4 class="text-danger">data-aos="fade-up-right"</h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque, quidem quo placeat adipisci non
                cupiditate ducimus dolorum et iste numquam accusamus voluptas minima laudantium odit iure
                consectetur perferendis. Minima, aspernatur?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt laborum vero similique veniam
                dolores officia reiciendis ea earum, distinctio molestias tenetur labore modi ullam esse
                necessitatibus libero harum dolorem magnam!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam labore vero sit nesciunt.
                Laboriosam fugiat recusandae labore officia, illo aliquam numquam inventore mollitia quidem
                consectetur, voluptates nihil sit repudiandae repellendus.
            </p>
        </div>
        <div class="col-md-6 col-sm-12"></div>
    </div>
<div class="row">
    <div class="col-md-6 col-sm-12"></div>
    <div class="col-md-6 col-sm-12 text-justify shadow-lg p-4 mb-5 bg-white rounded" data-aos="fade-up-left" data-aos-easing="ease-in-sine" data-aos-duration="2500">
        <h2 class="text-primary">Niềm Vui Lập Trình</h2>
        <h4 class="text-danger">data-aos="fade-up-left"</h4>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque, quidem quo placeat adipisci non
            cupiditate ducimus dolorum et iste numquam accusamus voluptas minima laudantium odit iure consectetur perferendis. Minima, aspernatur?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt laborum vero similique veniam
            dolores officia reiciendis ea earum, distinctio molestias tenetur labore modi ullam essene
            cessitatibus libero harum dolorem magnam!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam labore vero sit nesciunt.
            Laboriosam fugiat recusandae labore officia, illo aliquam numquam inventore mollitia quidem
            consectetur, voluptates nihil sit repudiandae repellendus.
        </p>
    </div>
</div>
</div>

Khi thêm xong các bạn nhấn nút Refresh hoặc F5 sẽ có những hiệu ứng giống mình ở video dưới đây:

Khi các bạn có các thuộc tính data-aos-offset, data-aos-duration, data-aos-easing, data-aos-delay trong các đối tượng HTML của trang web là bằng nhau thì mình không cần phải đi thiết lập những thuộc tính này cho từng đối tượng HTML mà ở đây thư viện AOS có một chức năng giúp ta làm điều đó dễ dàng hơn. Các bạn theo dõi đoạn code ở dưới đây nhé:

<script>
   AOS.init({
     offset: 200,
     duration: 600,
     easing: 'ease-in-sine',
     delay: 100,
   });
</script>

Thư viện AOS có thêm một chức năng giúp chúng ta có thể tắt hiệu ứng chuyển động khi màn hình của người dùng trên điện thoại hoặc những màn hình mà các bạn không muốn hiển thị hiệu ứng chuyển động. Để hiểu rõ hơn các bạn xem đoạn code ở dưới đây nhé:

<script>
AOS.init({
  disable: 'mobile'
});
AOS.init({
  disable: function () {
    var maxWidth = 1024;
    return window.innerWidth < maxWidth;
  }
});
</script>

Ở trên các bạn thấy có hai hàm AOS.init tượng trưng cho hai trường hợp thứ nhất là chức năng được viết sẵn bởi thư viện AOS là sẽ tắt hiệu ứng chuyển động khi màn hình là điện thoại còn cách thứ hai linh hoạt hơn là tùy vào màn hình mà ta thiết lập (như ở đây là 1024px) để tắt hiệu ứng chuyển động.

Ở đây mình cũng giới thiệu thêm vài thuộc tính nữa của thư viện AOS nếu các bạn muốn tìm hiểu thêm thì nhấp vào đường dấn mình đặt ở bên dưới nhé:

Tên Thuộc TínhMiêu Tả Thuộc Tính
data-aos-anchorKhi bạn muốn thực hiện hiệu ứng chuyển động dựa theo vị trí của những đối tượng HTML khác trong trang web. Giá trị mặc định là null.
data-aos-anchor-placementBạn thiết lập một vị trí của đối tượng HTML trên màn hình để thực hiện hiệu ứng chuyển động (Ví dụ bạn có thể thiết lập là top-bottom, top-center...)
data-aos-onceDùng để điều khiển hiệu ứng chuyển động có lặp lại hay không. Giá trị mặc định là true.

Sau đây là những hiệu ứng chuyển động mà mình đã làm trong trang_chinh.html có gì các bạn theo đường dẫn bên dưới tải source code để nắmrõ hơn nhé

Mình gửi các bạn đường dẫn để tải về những file trong thư mục AOS Scroll để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây mình mong muốn thư viện này sẽ giúp các bạn có thể làm trang web mình một cách sinh động hơn và nếu có thắc mắc gì cứ gủi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!