Hareket
tasarımı
Bir menü düğmesinin üç çizgiyi 45 derecelik bir çarpıya çevirmesi tasarım kararı değil, varsayılandır — herkesin kurduğu hazır kütüphaneler bunu yapar. Burada her parçanın birden çok varyantı var ve hiçbiri varsayılan değil: hepsi sitenin izometrik geometrisinden türüyor.
Dört varyant,
tek geometri
Dördü de açıldığında aynı yere varır: ±30 derecede kesişen iki eksen. Sitenin X ekseni ekranda +30, Z ekseni −30 derecedir; bu dünyada 45 diye bir yön yok. Fark, oraya nasıl gittiklerinde.
İzometrik
Üç çizgi sitenin üç eksenidir. Açılınca orta eksen içeri çekilir, kalan ikisi ±30°'de kesişir — 45° değil, çünkü bu dünyada 45° yok.
varyant="izometrik"Katman
Üç çizgi üst üste duran üç yüzeydir. Açılınca yığın açılır: üstteki ve alttaki eksenlerine döner, ortadaki aradan çekilir.
varyant="katman"Akış
Kapalıyken çizgiler hafifçe eğridir — hero'daki akış alanından alınmış üç örnek. Açılınca kaos düzene oturur: kristalleşme, 24 piksellik ölçekte.
varyant="akis"Ayrılan
Her çizgi aslında paralel bir çifttir. Üstüne gelince çift ayrılır, açılınca birleşip eksene oturur. İmlecin alanda yaptığının aynısı.
varyant="ayrilan"1.703 bileşen,
17 kaynak
Bunları biz yazmadık — açık kaynak kütüphanelerden aktardık ve projemizin yollarına bağladık. Aşağıdaki liste ada göre arama içindir; bileşenleri görmek için kategori kataloğuna geçin.
Canlı önizlemeli kataloğa git1703 sonuç · 120 gösteriliyor
animated beam
animata · background
@/hareket/animata/background/animated-beamblurry blob
animata · background
@/hareket/animata/background/blurry-blobboids ecosystem
animata · background
@/hareket/animata/background/boids-ecosystemdiagonal lines
animata · background
@/hareket/animata/background/diagonal-linesdot
animata · background
@/hareket/animata/background/dotgrid
animata · background
@/hareket/animata/background/gridinteractive grid
animata · background
@/hareket/animata/background/interactive-gridmoving gradient
animata · background
@/hareket/animata/background/moving-gradientshooting stars
animata · background
@/hareket/animata/background/shooting-starszigzag
animata · background
@/hareket/animata/background/zigzagfluid tabs
animata · tabs
@/hareket/animata/tabs/fluid-tabsgooey tabs
animata · tabs
@/hareket/animata/tabs/gooey-tabsshift tabs
animata · tabs
@/hareket/animata/tabs/shift-tabssplit reveal
animata · preloader
@/hareket/animata/preloader/split-revealvertical tiles
animata · preloader
@/hareket/animata/preloader/vertical-tilessplit reveal
animata · preloader
@/hareket/animata/preloader/split-reveal/indexpricing
animata · section
@/hareket/animata/section/pricingWeb Hooks card
animata · card
@/hareket/animata/card/WebHooks-cardblur stack card
animata · card
@/hareket/animata/card/blur-stack-cardcard comment
animata · card
@/hareket/animata/card/card-commentcard spread
animata · card
@/hareket/animata/card/card-spreadcard stack profile
animata · card
@/hareket/animata/card/card-stack-profilecard stack
animata · card
@/hareket/animata/card/card-stackcase study card
animata · card
@/hareket/animata/card/case-study-cardcollab card
animata · card
@/hareket/animata/card/collab-cardcomment reply card
animata · card
@/hareket/animata/card/comment-reply-cardemail feature card
animata · card
@/hareket/animata/card/email-feature-cardflip card
animata · card
@/hareket/animata/card/flip-cardgithub card shiny
animata · card
@/hareket/animata/card/github-card-shinygithub card skew
animata · card
@/hareket/animata/card/github-card-skewglowing card
animata · card
@/hareket/animata/card/glowing-cardintegration pills
animata · card
@/hareket/animata/card/integration-pillsled board
animata · card
@/hareket/animata/card/led-boardnotice card
animata · card
@/hareket/animata/card/notice-cardnotification card
animata · card
@/hareket/animata/card/notification-cardnotify user info
animata · card
@/hareket/animata/card/notify-user-inforeminder scheduler
animata · card
@/hareket/animata/card/reminder-schedulerscore card
animata · card
@/hareket/animata/card/score-cardstaggered card
animata · card
@/hareket/animata/card/staggered-cardsubscribe card
animata · card
@/hareket/animata/card/subscribe-cardsurvey card
animata · card
@/hareket/animata/card/survey-cardswap card
animata · card
@/hareket/animata/card/swap-cardswap text card
animata · card
@/hareket/animata/card/swap-text-cardtilted card
animata · card
@/hareket/animata/card/tilted-cardstacked sections
animata · scroll
@/hareket/animata/scroll/stacked-sectionsalarm clock
animata · widget
@/hareket/animata/widget/alarm-clockbattery level
animata · widget
@/hareket/animata/widget/battery-levelbattery
animata · widget
@/hareket/animata/widget/batterycalendar event
animata · widget
@/hareket/animata/widget/calendar-eventcalendar widget
animata · widget
@/hareket/animata/widget/calendar-widgetcalorie counter
animata · widget
@/hareket/animata/widget/calorie-counterclock with photo
animata · widget
@/hareket/animata/widget/clock-with-photocycling
animata · widget
@/hareket/animata/widget/cyclingdelivery card
animata · widget
@/hareket/animata/widget/delivery-carddirection card
animata · widget
@/hareket/animata/widget/direction-cardexpense tracker
animata · widget
@/hareket/animata/widget/expense-trackerflight widget
animata · widget
@/hareket/animata/widget/flight-widgetfund widget
animata · widget
@/hareket/animata/widget/fund-widgetlive score
animata · widget
@/hareket/animata/widget/live-scoremobile detail
animata · widget
@/hareket/animata/widget/mobile-detailmusic stack interaction
animata · widget
@/hareket/animata/widget/music-stack-interactionmusic widget
animata · widget
@/hareket/animata/widget/music-widgetnotes
animata · widget
@/hareket/animata/widget/notesprofile
animata · widget
@/hareket/animata/widget/profilereminder widget
animata · widget
@/hareket/animata/widget/reminder-widgetreminder
animata · widget
@/hareket/animata/widget/reminderscore board
animata · widget
@/hareket/animata/widget/score-boardsecurity alert
animata · widget
@/hareket/animata/widget/security-alertshopping list
animata · widget
@/hareket/animata/widget/shopping-listsleep tracker
animata · widget
@/hareket/animata/widget/sleep-trackerstorage status
animata · widget
@/hareket/animata/widget/storage-statusstorage widget
animata · widget
@/hareket/animata/widget/storage-widgetstudy timer
animata · widget
@/hareket/animata/widget/study-timerteam clock
animata · widget
@/hareket/animata/widget/team-clockvideo chat
animata · widget
@/hareket/animata/widget/video-chatvpn widget
animata · widget
@/hareket/animata/widget/vpn-widgetwater tracker
animata · widget
@/hareket/animata/widget/water-trackerweather card
animata · widget
@/hareket/animata/widget/weather-cardweekly progress
animata · widget
@/hareket/animata/widget/weekly-progressconfirmation message
animata · feature-cards
@/hareket/animata/feature-cards/confirmation-messagecontent scan
animata · feature-cards
@/hareket/animata/feature-cards/content-scananimatedtimeline
animata · progress
@/hareket/animata/progress/animatedtimelinespinner
animata · progress
@/hareket/animata/progress/spinnercategory glyphs
animata · skeleton
@/hareket/animata/skeleton/category-glyphscategory skeleton
animata · skeleton
@/hareket/animata/skeleton/category-skeletoncode
animata · skeleton
@/hareket/animata/skeleton/codecookie banner
animata · skeleton
@/hareket/animata/skeleton/cookie-bannerlist
animata · skeleton
@/hareket/animata/skeleton/listreceipt
animata · skeleton
@/hareket/animata/skeleton/receiptreport
animata · skeleton
@/hareket/animata/skeleton/reportwide card
animata · skeleton
@/hareket/animata/skeleton/wide-cardflower menu
animata · fabs
@/hareket/animata/fabs/flower-menuspeed dial
animata · fabs
@/hareket/animata/fabs/speed-dialexpandable
animata · carousel
@/hareket/animata/carousel/expandableimage carousel
animata · carousel
@/hareket/animata/carousel/image-carouseldisclose image
animata · image
@/hareket/animata/image/disclose-imageimage box shadow
animata · image
@/hareket/animata/image/image-box-shadowimages reveal
animata · image
@/hareket/animata/image/images-revealphoto booth
animata · image
@/hareket/animata/image/photo-boothskew image
animata · image
@/hareket/animata/image/skew-imagetilted cover
animata · image
@/hareket/animata/image/tilted-covertrailing image
animata · image
@/hareket/animata/image/trailing-imagezoom image
animata · image
@/hareket/animata/image/zoom-imageeight
animata · bento-grid
@/hareket/animata/bento-grid/eighteleven
animata · bento-grid
@/hareket/animata/bento-grid/elevenfive
animata · bento-grid
@/hareket/animata/bento-grid/fivefour
animata · bento-grid
@/hareket/animata/bento-grid/fourgradient
animata · bento-grid
@/hareket/animata/bento-grid/gradientnine
animata · bento-grid
@/hareket/animata/bento-grid/nineseven
animata · bento-grid
@/hareket/animata/bento-grid/sevensix
animata · bento-grid
@/hareket/animata/bento-grid/sixten
animata · bento-grid
@/hareket/animata/bento-grid/tenthree
animata · bento-grid
@/hareket/animata/bento-grid/threeanimated border trail
animata · container
@/hareket/animata/container/animated-border-trailanimated dock
animata · container
@/hareket/animata/container/animated-dockannouncement ribbon
animata · container
@/hareket/animata/container/announcement-ribboncursor tracker
animata · container
@/hareket/animata/container/cursor-trackerfibonacci lines
animata · container
@/hareket/animata/container/fibonacci-linesmarquee
animata · container
@/hareket/animata/container/marqueenav tabs
animata · container
@/hareket/animata/container/nav-tabsVaryant çoğaltmak
süslemek değildir
Her varyantın bir fikri var
Beş farklı süsleme değil, beş farklı düşünce. Fikri anlatılamayan varyant kütüphaneye girmez.
Hepsi aynı dile bağlı
İzometrik eksenler, tek zaman çizelgesi, aynı yumuşama eğrisi. Varyant değişir, dil değişmez.
Parça başına JavaScript yok
Durum bir data özniteliği, hareket CSS. Yüz parçalı sayfada da maliyet aynı kalır.
Dokunma hedefi 44px
Görsel boyut ne olursa olsun vuruş alanı işaretçiye göre büyür; parmakla ıskalanmaz.
Hareket azaltılabilir
prefers-reduced-motion açıkken geçişler kapanır, durumlar okunur kalır.
JavaScript kapalıyken çalışır
Sunucudan gelen HTML eksiksiz; hareket bir katman, içeriğin şartı değil.
Bugün yazın,
üç günde taslağı görün.
+90 505 577 02 45 · info@ayyildizrobotics.com