Chuyển đến nội dung chính
VI

13 icon · interaction="hover-loop"

Icon động lặp khi hover

Những icon này lặp liên tục khi con trỏ còn nằm trên chúng và chạy nốt chu kỳ hiện tại sau khi con trỏ rời đi, nên không bao giờ dừng giữa chừng. Chúng hợp với các liên kết mời người dùng nán lại lâu hơn, chủ yếu là icon mạng xã hội và cộng đồng.

Tất cả icon tương tác “Hover lặp”

Cách hoạt động

Lặp khi đang hover, chạy nốt chu kỳ hiện tại sau khi con trỏ rời đi (mouseleave) và đứng yên khi người dùng bật giảm chuyển động.

Khi người dùng bật giảm chuyển động, icon đứng yên khi hover. Chạm trên màn hình cảm ứng không kích hoạt hiệu ứng hover, còn focus bằng bàn phím thì có, nếu icon nằm trong một phần tử có thể focus. React component lo hết những việc này; bạn chỉ cần chọn icon.

Dùng ở đâu

  • Liên kết mạng xã hội ở header và footer
  • Nút mời tham gia cộng đồng và nhóm chat
  • Liên kết portfolio và hồ sơ
  • Bộ chọn ngôn ngữ và khu vực

Theo danh mục

Dùng trong React

Các icon liệt kê ở đây mặc định chạy tương tác này. Icon khác cũng dùng được: chỉ cần truyền prop interaction.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings mặc định dùng 'hover'
<UseAnimations animation={settings} interaction="hover-loop" size={32} />

Dùng render prop để cả link kích hoạt vòng lặp, kể cả khi focus bằng bàn phím. Đổi nhịp độ bằng speed:

import github from 'react-useanimations/lib/github';

<UseAnimations
  animation={github}
  speed={1.5}
  render={(eventProps, animationProps) => (
    <a href="https://github.com/useAnimations" aria-label="GitHub" {...eventProps}>
      <span {...animationProps} />
    </a>
  )}
/>

Tất cả prop đều có trong tài liệu. Ngoài React, các icon là tệp Lottie JSON; trang Icon Lottie hướng dẫn cách tái tạo các tương tác bằng lottie-web.

Câu hỏi thường gặp

Những icon nào dùng tương tác “Hover lặp”?

13 icon: Flag, Cloud, Globe, Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram và Twitter. Icon lặp khi hover thường dùng cho liên kết mạng xã hội, lời mời tham gia cộng đồng, liên kết portfolio và bộ chọn ngôn ngữ.

Điều gì xảy ra khi người dùng bật giảm chuyển động?

Khi người dùng bật giảm chuyển động, icon đứng yên khi hover. React component tự đọc prefers-reduced-motion và cập nhật ngay khi thiết lập này thay đổi, nên bạn không cần viết thêm code nào.

Làm sao đổi tương tác của một icon?

Mỗi icon chạy tương tác mà nó được thiết kế cho. Truyền interaction="hover-loop" để icon khác cũng có hành vi này, hoặc một giá trị khác ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') để đổi sang tương tác tương ứng. Các prop autoplay, loop và speed điều chỉnh cách phát.