İçeriğe geç
TR

144 ikon · interaction="hover-replay"

Hover’da oynayan animasyonlu ikonlar

Bu ikonlar imleç üzerlerine geldiğinde bir kez oynar ve kendiliğinden tamamlanır; böylece araç çubuğunun üzerinden hızlıca geçmek titrek bir harekete dönüşmez. Setin büyük kısmı böyle çalışır: hover’da canlanan oklar, dosyalar, cihazlar, hava durumu ve marka ikonları.

“Hover’da tekrar” etkileşimli tüm ikonlar

Nasıl davranır

Azaltılmış hareket tercih edilmediği sürece mouseenter’da bir kez oynar. İmlecin ayrılması animasyonu durdurmaz; oynarken yeniden üzerine gelmek de baştan başlatmaz.

Azaltılmış hareket tercih edildiğinde hover animasyonu oynatmaz. 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

  • Özellik listeleri ve fiyatlandırma tabloları
  • Ok bağlantıları ve call-to-action düğmeleri
  • Editörlerde ve dashboard’larda araç çubuğu düğmeleri
  • Landing page grid’indeki kartlar
  • Footer ve iletişim bağlantıları

Kategoriye göre

  • Navigasyon · 22

    Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar

  • Eylemler · 6

    Award, Key, Maximize 2, Minimize 2, Shield, Slash

  • İçerik · 10

    Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users

  • Medya · 11

    Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV

  • Metin düzenleme · 2

    Hash, List

  • İletişim · 9

    At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail

  • Cihazlar · 10

    Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi

  • Hava durumu · 13

    Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap

  • Harita ve konum · 8

    Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target

  • E-ticaret · 10

    Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck

  • Grafikler · 5

    Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up

  • Geliştirme · 8

    Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server

  • Tasarım ve yerleşim · 7

    Columns, Grid, Layers, Layout, Move, Pen Tool, Table

  • Şekiller ve matematik · 8

    Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle

  • Sosyal medya · 9

    Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X

  • Diğer · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

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-replay" size={32} />

Yalnızca ikonu değil, kartın ya da bağlantının tamamını hover alanı yapın: render prop’uyla olaylar sizin öğenize bağlanır ve klavye odağı da animasyonu oynatır.

import trendingUp from 'react-useanimations/lib/trendingUp';

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> Haftalık büyüme
    </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 tekrar” etkileşimini kullanır?

144 ikon: Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down ve 129 ikon daha. Hover’da oynayan ikonlar genellikle ok bağlantılarına, özellik listelerine, araç çubuğu düğmelerine ve landing page kartlarına canlılık katar.

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

Azaltılmış hareket tercih edildiğinde hover animasyonu oynatmaz. 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-replay" 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.