本文へスキップ
JA

13 個のアイコン · interaction="hover-loop"

ホバー中にループするアニメーションアイコン

ポインターが乗っている間はループし、離れたあとは今のサイクルを最後まで再生してから止まるアイコンです。動きの途中で止まることはありません。じっくり見てほしいリンク、主に SNS やコミュニティのアイコンに向いています。

「ホバーでループ」のアイコン一覧

動作

ホバー中はループし、mouseleave のあとは今のサイクルを最後まで再生します。モーション軽減が有効な場合は静止したままです。

モーション軽減が有効な場合、ホバー中もアイコンは静止したままです。タッチスクリーンでのタップではホバーアニメーションは始まりません。アイコンがフォーカス可能な要素の中にあれば、キーボードフォーカスでも再生されます。これらはすべて React コンポーネントが処理するので、アイコンを選ぶだけで済みます。

使いどころ

  • ヘッダーやフッターの SNS リンク
  • コミュニティやチャットへの招待ボタン
  • ポートフォリオやプロフィールへのリンク
  • 言語・地域の選択

カテゴリ別

React で使う

ここに並ぶアイコンは、デフォルトでこのインタラクションで再生されます。ほかのアイコンでも interaction prop を渡せば同じ動きにできます。

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

// Settings の本来のインタラクションは 'hover'
<UseAnimations animation={settings} interaction="hover-loop" size={32} />

render prop を使えば、キーボードフォーカスも含めてリンク全体でループを開始できます。速さは 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>
  )}
/>

すべての props はドキュメントにまとめています。React 以外では、アイコンは Lottie JSON ファイルです。lottie-web でインタラクションを再現する方法は Lottie アイコンを参照してください。

よくある質問

「ホバーでループ」のインタラクションを使うアイコンは？

13 個あります。Flag、Cloud、Globe、Behance、Codepen、Discord、Dribbble、Facebook、Github、Linkedin、Pocket、Telegram、Twitterです。ホバー中にループするアイコンは、SNS リンク、コミュニティへの招待、ポートフォリオへのリンク、言語の選択によく使われます。

ユーザーがモーション軽減を設定している場合はどうなりますか？

モーション軽減が有効な場合、ホバー中もアイコンは静止したままです。React コンポーネントが prefers-reduced-motion を読み取り、設定が変わればそれに追従するので、そのためのコードを書く必要はありません。

アイコンのインタラクションを変えるには？

どのアイコンも、デザインされたときのインタラクションで再生されます。interaction="hover-loop" を渡せばほかのアイコンにもこの動きを付けられ、別の値（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）を渡せば別の動きに変えられます。再生は autoplay、loop、speed の props で調整できます。