İçeriğe geç
TR

13 ikon · interaction="hover-loop"

Hover’da döngüye giren animasyonlu ikonlar

Bu ikonlar imleç üzerlerinde kaldığı sürece döngüde oynar ve imleç ayrıldıktan sonra mevcut turu tamamlar; böylece hareketin ortasında asla durmazlar. Daha uzun bakmaya davet eden bağlantılara, çoğunlukla sosyal medya ve topluluk ikonlarına uyarlar.

“Hover’da döngü” etkileşimli tüm ikonlar

Nasıl davranır

Hover süresince döngüde oynar, mouseleave’den sonra mevcut turu tamamlar ve azaltılmış hareket tercih edildiğinde statik kalır.

Azaltılmış hareket tercih edildiğinde ikon hover sırasında statik kalır. Dokunmatik ekranlarda dokunmak hover animasyonlarını başlatmaz; ikon odaklanabilir bir öğenin içindeyse klavye odağı başlatır. Bunların hepsini React bileşeni halleder; siz yalnızca ikonu seçersiniz.

Nerede kullanılır

  • Header ve footer’lardaki sosyal medya bağlantıları
  • Topluluk ve sohbet davet düğmeleri
  • Portföy ve profil bağlantıları
  • Dil ve bölge seçiciler

Kategoriye göre

React’te kullanın

Burada listelenen ikonlar varsayılan olarak bu etkileşimi oynatır. Diğer ikonlar da kullanabilir: interaction prop’unu geçmeniz yeterli.

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

// Settings normalde 'hover' kullanır
<UseAnimations animation={settings} interaction="hover-loop" size={32} />

Döngüyü klavye odağı da dahil bağlantının tamamının tetiklemesi için render prop’unu kullanın. Hızı speed ile değiştirin:

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üm prop’lar dokümantasyonda. React dışında ikonlar Lottie JSON dosyalarıdır; etkileşimlerin lottie-web ile nasıl yeniden oluşturulacağını Lottie ikonları sayfası gösterir.

Sık sorulan sorular

Hangi ikonlar “Hover’da döngü” etkileşimini kullanır?

13 ikon: Flag, Cloud, Globe, Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram ve Twitter. Hover’da döngüye giren ikonlar genellikle sosyal medya bağlantılarında, topluluk davetlerinde, portföy bağlantılarında ve dil seçicilerde kullanılır.

Kullanıcı azaltılmış hareketi tercih ederse ne olur?

Azaltılmış hareket tercih edildiğinde ikon hover sırasında statik kalır. React bileşeni prefers-reduced-motion ayarını okur ve ayar değiştiğinde güncellenir; bunun için kod yazmanız gerekmez.

Bir ikonun etkileşimini nasıl değiştiririm?

Her ikon kendisi için tasarlanan etkileşimi oynatır. Herhangi bir ikona bu davranışı vermek için interaction="hover-loop" geçin; başka bir davranış için başka bir değer ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') kullanın. Oynatmayı autoplay, loop ve speed prop’larıyla ayarlayabilirsiniz.