Animasyonlar

Bu belge sitenin hareket sistemini anlatır: sayfa açılışında hero, kaydırınca görünen bloklar, erişilebilirlik ve kapatma anahtarı.

Motion paketi kurulumu: Font & UI Kullanımı. Layout kabuğu: Site Layout. Canlı örnek başlık: Contact — ContactPage.astro.

Mimari (Üç Parça)

animations.ts          → süre, mesafe, aç/kapa
BaseLayout.astro       → data-animations="on" + initMotion script
motion-init.ts         → Motion kütüphanesi (hero + scroll)

Sayfa veya bileşen yalnızca HTML attribute ekler; inline animasyon JS yazılmaz.

`animations.ts`

Dosya: src/config/animations.ts

export const animations = {
  enabled: true,
  respectReducedMotion: true,

  hero: {
    duration: 1,
    distance: 40,
    initialDelayMs: 300,
  },

  scroll: {
    duration: 0.7,
    distance: 24,
    once: true,
    margin: '0px 0px -15% 0px',
  },
} as const;

Alan	Anlamı
`enabled`	`false` → hiç animasyon çalışmaz
`respectReducedMotion`	OS «az hareket» tercihine uy
`hero.*`	`[data-motion-hero]` varsayılanları
`scroll.*`	`[data-motion]` viewport tetiklemesi

Preset tipleri: fade-up | fade-in | expand-x (MotionPreset).

`BaseLayout` ve `data-animations`

<html lang={lang} data-animations={animations.enabled ? 'on' : undefined}>

enabled: false iken attribute yok → CSS başlangıç gizleme de uygulanmaz.

Sayfa sonunda (tipik):

<script>
  import { initMotion } from '@/scripts/motion-init';
  initMotion();
</script>

`motion-init.ts` Davranışı

animations.enabled === false → çık
prefers-reduced-motion: reduce ve respectReducedMotion → tüm hedeflere anında motion-done (animasyon yok, içerik görünür)
Aksi halde:
- Hero: [data-motion-hero] — initialDelayMs sonra sırayla
- Scroll: [data-motion] — inView ile viewport’a girince bir kez (scroll.once)

Tamamlanan öğe motion-done sınıfı alır; tekrar tetiklenmez.

HTML Attribute’ları

Hero (Sayfa Üstü)

<h1 data-motion-hero="fade-up">İletişim</h1>

Attribute	Değerler
`data-motion-hero`	`fade-up`, `fade-in`, `expand-x`

Contact örneği (ContactPage.astro):

<h1
  class="fix-type-h1"
  data-motion-hero="fade-up"
>
  {t(contactPage.heading, locale)}
</h1>

Scroll Reveal

<section data-motion="fade-up">...</section>

Attribute	Açıklama
`data-motion`	Scroll’da aynı preset’ler
`data-motion-delay`	Opsiyonel gecikme (saniye, sayı)
`data-motion-duration`	Opsiyonel süre override

Örnek:

<p data-motion="fade-in" data-motion-delay="0.2">...</p>

CSS (`core.css`)

html[data-animations="on"] iken tamamlanmamış [data-motion] / [data-motion-hero] başlangıçta gizlenir; motion-done sonrası görünür kalır.

`enabled: false`

Tek satır:

enabled: false,

initMotion hemen döner; attribute’lu elemanlar animasyonsuz normal akışta kalır (layout’ta data-animations da kapalı).

Staging veya düşük cihaz testi için kullanışlıdır.

`prefers-reduced-motion`

Kullanıcı işletim sisteminde «Reduce motion» açtıysa ve respectReducedMotion: true ise:

Hero ve scroll animasyonları çalıştırılmaz
Elemanlar anında görünür (revealInstant)

Erişilebilirlik için açık bırakın; kapatmak (respectReducedMotion: false) yalnızca bilinçli tercihle.

Ne Değiştirirse Ne Olur

Değişiklik	Sonuç
`enabled: false`	Tüm site animasyonsuz
`hero.duration`	Hero hareket süresi
`scroll.margin`	Scroll tetikleme viewport payı
`data-motion-hero="expand-x"`	Yatay genişleme hero
Yeni `data-motion` blok	Kaydırınca reveal
`respectReducedMotion: false`	OS tercihi yok sayılır

Yapmayın

Her bileşende inline animate() veya ayrı script dosyası — motion-init merkezi kalsın.
React island içine scroll animasyonu taşımayın — Astro markup + attribute yeterli.
Layout’ta ikinci motion başlatıcı eklemeyin.
enabled: true iken attribute unutmak — eleman core.css ile gizli kalabilir; preset verin veya animasyonu kapatın.

İlgili Rehberler

Font & UI Kullanımı — Motion bağımlılığı
Site Layout — BaseLayout script
Sayfa Ekle / Kaldır — Contact örneği
Fix UI Kullanımı — görsel bileşenler (animasyondan ayrı)

Özet

Config animations.ts; BaseLayout data-animations + initMotion. Hero: data-motion-hero; scroll: data-motion. Opsiyonel delay/duration. enabled: false veya reduced-motion ile kapatılır. Contact fade-up örneği. Inline/island motion yazmayın.