Hiệu ứng ấn tượng khi cuộn trang xuống (animate.css + waypoints.js)

Ngày cập nhật: 18/01/2019 | Số lần xem: 10652 | Phân loại: Giao diện người dùng

Bạn có thể tìm kiếm ở đây…

Hiệu ứng chuyển động sinh động trên giao diện web có thể được thực hiện dễ dàng bằng thư viện Animate.css. Để kích hoạt hiệu ứng này khi người dùng cuộn đến một phần cụ thể của trang, bạn có thể sử dụng thư viện Waypoints.js – một công cụ mạnh mẽ giúp xác định vị trí và theo dõi hành vi cuộn trang.

Dưới đây là một ví dụ minh họa về cách kết hợp hai thư viện này:

1
2
3
4
5
6
7

var waypoint = new Waypoint({
 element: document.getElementById('element-waypoint'),
 handler: function(direction) {
  this.element.className += " fadeInLeft";
 },
 offset: '75%'
});

Lưu ý rằng trước đó, bạn cần thêm class animated cho phần tử HTML mà bạn muốn áp dụng hiệu ứng. Ví dụ:

1

<div id="element-waypoint" class="animated"></div>

Khi người dùng cuộn trang đến khoảng 75% chiều cao của phần tử, hiệu ứng fadeInLeft sẽ được kích hoạt, tạo ra trải nghiệm trực quan và mượt mà cho người dùng.

• Tạo hiệu ứng cuộn trang bằng Waypoints và Animate.css