Zum Inhalt springen
DE

13 Icons · interaction="hover-loop"

Animierte Icons mit Hover-Loop

Diese Icons laufen in Schleife, solange der Mauszeiger auf ihnen liegt, und spielen den aktuellen Durchlauf zu Ende, wenn er sie verlässt. Sie bleiben also nie mitten in der Bewegung stehen. Sie eignen sich für Links, die zu einem längeren Blick einladen, vor allem Social- und Community-Icons.

Alle Icons mit Hover-Loop

So verhält es sich

Läuft in Schleife, solange der Mauszeiger darauf liegt, spielt nach mouseleave den aktuellen Durchlauf zu Ende und bleibt bei reduzierter Bewegung statisch.

Ist reduzierte Bewegung eingestellt, bleibt das Icon auch bei Hover statisch. Tippen auf Touchscreens startet keine Hover-Animation; der Tastaturfokus dagegen schon, wenn das Icon in einem fokussierbaren Element steckt. All das übernimmt die React-Komponente, Sie wählen nur das Icon aus.

Einsatzmöglichkeiten

  • Social-Media-Links in Header und Footer
  • Einladungs-Buttons für Community und Chat
  • Links zu Portfolio und Profil
  • Auswahl von Sprache und Region

Nach Kategorie

In React verwenden

Die hier aufgeführten Icons spielen diese Interaktion standardmäßig ab. Jedes andere Icon kann sie ebenfalls nutzen: Übergeben Sie dazu das Prop interaction.

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

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

Nutzen Sie das render-Prop, damit der ganze Link den Loop auslöst, auch per Tastaturfokus. Das Tempo ändern Sie mit 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>
  )}
/>

Alle Props stehen in der Dokumentation. Außerhalb von React sind die Icons Lottie-JSON-Dateien; unter Lottie-Icons sehen Sie, wie Sie die Interaktionen mit lottie-web nachbauen.

Häufige Fragen

Welche Icons nutzen die Interaktion „Hover-Loop“?

13 Icons: Flag, Cloud, Globe, Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram und Twitter. Icons mit Hover-Loop kennzeichnen typischerweise Social-Links, Community-Einladungen, Portfolio-Links und die Sprachauswahl.

Was passiert, wenn reduzierte Bewegung eingestellt ist?

Ist reduzierte Bewegung eingestellt, bleibt das Icon auch bei Hover statisch. Die React-Komponente liest prefers-reduced-motion aus und reagiert, sobald sich die Einstellung ändert. Sie brauchen dafür keinen eigenen Code.

Wie ändere ich die Interaktion eines Icons?

Jedes Icon spielt die Interaktion ab, für die es gestaltet wurde. Mit interaction="hover-loop" bekommt jedes andere Icon dieses Verhalten, mit einem anderen Wert ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') ein anderes. Die Props autoplay, loop und speed steuern die Wiedergabe.