Scroll animation bằng các thư viện Javascript như ScrollReveal giúp website của bạn hoạt động mượt mà và gây thiện cảm với người dùng hơn.
Scroll animation là gì?
Scroll animation được hiểu là các hiệu ứng hiển thị sẽ xuất hiện cho các đối tượng trên website vào sau thời điểm bạn scroll chuột (kéo xuống trong cửa sổ trình duyệt).
Phần nhiều chúng ta nghe nói đến “Fixed Header” hay “Sticky Navigation”, chính là một kiểu scroll animation cho phần menu và logo của website, khi kéo tới một thời điểm nào đó thì mới hiện ra và cố định trên phần trên cùng website.
Scroll animation sử dụng thư viện ScrollReveal
Để sử dụng scroll animation, ta thường sử dụng các thư viện từ các bên thứ ba, tuy nhiên kích thước file có thể khá lớn và không hoạt động như ý muốn. Code Tốt xin giới thiệu thư viện ScrollReveal, với dung lượng nén chỉ 3Kb giúp bạn làm điều này trên website.
Cài đặt ScrollReveal
Bạn có thể cài đặt bằng các cách khác nhau.
Cài đặt trên production site bằng thư viện đã minify (.min.js), bạn chỉ cần nhét file này vào phía trước thẻ </body>
là được.
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
Nếu bạn muốn sử dụng nó trong quá trình development, bạn có thể cài đặt bằng một trong các cách sau:
- Tải về trên Github
- Cài đặt bằng npm:
npm install scrollreveal --save
- Cài đặt bằng bower:
bower install scrollreveal
Sử dụng thư viện ScrollReveal
Nguyên tắc sử dụng của ScrollReveal rất đơn giản: bạn tìm đối tượng sẽ sử dụng animation và sử dụng API của thư viện để thêm hiệu ứng vào.
Dưới đây là ví dụ nếu bạn đã sử dụng cài đặt qua production:
<!-- HTML --> <div class="foo"> Foo </div> <div class="bar"> Bar </div>
// JavaScript window.sr = ScrollReveal(); sr.reveal('.foo'); sr.reveal('.bar');
Với ScrollReveal, bạn có thể dễ dàng có nhiều cấu hình tuỳ chọn, chẳng hạn như bật/tắt hiệu ứng trên mobile, set độ trễ thời gian, opacity, vị trí di chuyển và xuất hiện của các đối tượng.
ScrollReveal và DOM
Không chỉ làm việc với selector, ScrollReveal còn có thể sử dụng với Node và NodeList.
Chẳng hạn, bạn muốn tất cả element có class “.reveal-fade-in” sẽ nhận hiệu ứng opacity từ 0 đến 1 khi bạn scroll:
sr.reveal(document.querySelectorAll('.reveal-fade-in'));
Những gợi ý sử dụng ScrollReveal
ScrollReveal cũng cung cấp nhiều gợi ý về cải thiện UX cho người truy cập website, chẳng hạn như nên ẩn các đối tượng cho tới khi người dùng load xong web page, tương tự cách Typekit load web font. bằng cách thêm ScrollReveal code vào ngay trong thẻ <head>
.
Bạn nên đọc thêm toàn bộ hướng dẫn về thư viện này qua Github.
Kết luận
Với ScrollReveal, bạn tiết kiệm kha khá thời gian để tập trung vào việc hoàn thiện layout. Phần animation sẽ chỉ cần thực hiện ở công đoạn cuối cùng trước khi QA. Nó là một thư viện Javascript nhỏ nhưng chất lượng tốt, hỗ trợ cả trình duyệt IE10+ và không bị phụ thuộc và jQuery.
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.