Langsung ke konten
ID

13 ikon · interaction="hover-loop"

Ikon animasi loop saat hover

Ikon ini berputar berulang selama pointer berada di atasnya dan menyelesaikan siklus yang sedang berjalan setelah pointer keluar, sehingga tidak pernah berhenti di tengah gerakan. Cocok untuk tautan yang mengundang pengguna berlama-lama, kebanyakan ikon media sosial dan komunitas.

Semua ikon dengan interaksi loop saat hover

Cara kerjanya

Berputar berulang selama di-hover, menyelesaikan siklusnya setelah mouseleave, dan tetap diam jika reduced motion dipilih.

Jika pengguna memilih reduced motion, ikon tetap diam saat di-hover. Ketukan di layar sentuh tidak memulai animasi hover, sedangkan fokus keyboard memulainya jika ikon berada di dalam elemen yang bisa difokus. Komponen React menangani semua ini; Anda cukup memilih ikonnya.

Tempat memakainya

  • Tautan media sosial di header dan footer
  • Tombol undangan komunitas dan chat
  • Tautan portofolio dan profil
  • Pemilih bahasa dan wilayah

Berdasarkan kategori

Pakai di React

Ikon yang tercantum di sini menjalankan interaksi ini secara default. Ikon lain pun bisa memakainya: cukup berikan prop interaction.

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

// Settings biasanya memakai 'hover'
<UseAnimations animation={settings} interaction="hover-loop" size={32} />

Pakai render prop agar seluruh tautan memicu loop, termasuk saat mendapat fokus keyboard. Atur temponya dengan 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>
  )}
/>

Semua props dijelaskan di dokumentasi. Di luar React, ikon-ikon ini adalah file Lottie JSON; halaman Ikon Lottie menunjukkan cara membuat ulang interaksinya dengan lottie-web.

FAQ

Ikon mana saja yang memakai interaksi loop saat hover?

13 ikon: Flag, Cloud, Globe, Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, dan Twitter. Ikon loop saat hover biasanya menandai tautan media sosial, undangan komunitas, tautan portofolio, dan pemilih bahasa.

Apa yang terjadi jika pengguna memilih reduced motion?

Jika pengguna memilih reduced motion, ikon tetap diam saat di-hover. Komponen React membaca prefers-reduced-motion dan ikut menyesuaikan saat pengaturannya berubah, jadi Anda tidak perlu menulis kode apa pun untuk itu.

Bagaimana cara mengganti interaksi sebuah ikon?

Setiap ikon menjalankan interaksi yang memang dirancang untuknya. Berikan interaction="hover-loop" agar ikon lain berperilaku seperti ini, atau nilai lain ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') untuk menggantinya. Props autoplay, loop, dan speed mengatur pemutarannya.