Scroll animation mượt hơn với thư viện Javascript ScrollReveal

2.6/5 - (10 bình chọn)

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.

Scroll Animation với thư viện Javascript ScrollReveal

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.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...