Перейти к содержимому
RU

13 иконок · interaction="hover-loop"

Иконки с циклической анимацией при наведении

Эти иконки проигрываются в цикле, пока на них наведён курсор, а когда он уходит, доигрывают текущий цикл, поэтому никогда не замирают посреди движения. Они подходят для ссылок, на которых хочется задержаться, — в основном это иконки соцсетей и сообществ.

Все иконки со взаимодействием «Цикл при наведении»

Как это работает

Проигрывается в цикле, пока на иконку наведён курсор, после mouseleave доигрывает текущий цикл, а при уменьшении движения остаётся статичной.

Если включено уменьшение движения, иконка при наведении остаётся статичной. Касание сенсорного экрана hover-анимацию не запускает, а фокус с клавиатуры запускает, если иконка находится внутри фокусируемого элемента. Всё это берёт на себя React-компонент — вам остаётся только выбрать иконку.

Где использовать

  • Ссылки на соцсети в шапке и футере
  • Кнопки приглашения в сообщество и чат
  • Ссылки на портфолио и профиль
  • Выбор языка и региона

По категориям

Использование в React

Перечисленные здесь иконки проигрывают это взаимодействие по умолчанию. Его можно задать и любой другой иконке — через проп interaction.

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

// Settings по умолчанию использует 'hover'
<UseAnimations animation={settings} interaction="hover-loop" size={32} />

Используйте render-проп, чтобы цикл запускала вся ссылка, в том числе при фокусе с клавиатуры. Темп меняется через 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>
  )}
/>

Все пропсы описаны в документации. Вне React иконки — это файлы Lottie JSON; на странице Lottie-иконки показано, как воссоздать взаимодействия с помощью lottie-web.

Частые вопросы

Какие иконки используют взаимодействие «Цикл при наведении»?

13 иконок: Flag, Cloud, Globe, Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram и Twitter. Циклическую анимацию при наведении обычно используют для ссылок на соцсети, приглашений в сообщество, ссылок на портфолио и выбора языка.

Что происходит, если у пользователя включено уменьшение движения?

Если включено уменьшение движения, иконка при наведении остаётся статичной. React-компонент читает prefers-reduced-motion и реагирует на изменение настройки, так что писать для этого код не нужно.

Как изменить взаимодействие иконки?

Каждая иконка проигрывает то взаимодействие, для которого её нарисовали. Передайте interaction="hover-loop", чтобы так же вела себя любая другая иконка, или другое значение ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay'), чтобы сменить его. Воспроизведение настраивается пропсами autoplay, loop и speed.