Katmanlar ve tipografi

Slaytın içindeki her eleman, slayt aktif olunca canlanabilir. Editör yok, zaman çizelgesi arayüzü yok: tek bir attribute.

<style>
  body { padding: 0; }
  .copy { position: absolute; left: 7%; bottom: 14%; right: 7%; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
  .copy small { font: 600 12px/1 system-ui; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
  .copy h2 { font-size: clamp(30px, 6vw, 62px); line-height: 1.02; letter-spacing: -.03em; margin: 12px 0; }
  .copy p { margin: 0 0 18px; max-width: 520px; opacity: .9; }
  .copy a { display: inline-block; background: #fff; color: #111; padding: 10px 18px; border-radius: 99px; text-decoration: none; font-weight: 600; text-shadow: none; }
</style>
<insigne-slider effect="fade" autoplay="6000" ken-burns="alternate">
  <div>
    <img data-bg src="https://picsum.photos/id/1039/1800/1100" alt="Waterfall in a forest">
    <div class="copy">
      <small data-in="fade">Chapter one</small>
      <h2 data-in="chars-up">Headlines letter by letter</h2>
      <p data-in="rise" data-delay="500">Paragraphs rise as a block, after the title.</p>
      <a href="#" data-in="rise" data-delay="700">Read more</a>
    </div>
  </div>
  <div>
    <img data-bg src="https://picsum.photos/id/1044/1800/1100" alt="Rocky coast">
    <div class="copy">
      <small data-in="fade">Chapter two</small>
      <h2 data-in="lines-up">Or line by line, revealed from a mask</h2>
      <p data-in="words-blur" data-split="words">Each word comes into focus on its own.</p>
    </div>
  </div>
</insigne-slider>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Attribute'lar

Attribute	Anlamı
data-in="reçete"	Giriş. Boş değer = layerIn ayarı (varsayılan rise).
data-out="çıkış"	Slayt ayrılırken çıkış: reverse (varsayılan: girişin tersi, daha hızlı), fade, up, down, left, blur veya none.
data-delay="ms"	Başlangıç zamanı. Verilmezse katmanlar DOM sırasına göre 110 ms arayla gelir.
data-split="lines | words | chars | none"	Yazının nasıl bölüneceğini değiştirir. Başlıklar reçetenin bölmesini kullanır; diğer elemanlar siz belirtmedikçe tek blok olarak canlanır.

Reçeteler

Tür	Reçeteler
Yükselme ve düşme	rise, drop, slide-left, slide-right, float
Maskeler	mask, lines-up, chars-up
Odak	fade, blur, words-blur, chars-blur
3D ve eğme	flip, chars-flip, skew, zoom, chars-scale
Etkileyici	stagger, tracking, typewriter, glitch-text, chars-wave

Zamanlamalarıyla tam liste reçeteler referansında. Giren slaytın arka planı için görsel reçeteleri de var (imageIn): develop, focus, spotlight, rise, tint, flicker, depth-zoom, breathe.

Kendi reçeteleriniz

Bir reçete veridir: başlangıç karesi, bitiş karesi, nasıl bölüneceği ve ne kadar kademeleneceği.

new InsigneSlider(el, {
  recipes: {
    'yumusak-yukselis': {
      split: 'words', mask: true, stagger: 45,
      in: [{ y: '110%', o: 0 }, { y: 0, o: 1, d: 900, e: 'expo.out' }],
      hover: [{ y: 0 }, { y: '-8%', d: 260, e: 'power2.out' }],
    },
  },
});

<h2 data-in="yumusak-yukselis">Kendi zamanlamanız</h2>

Kare alanları: o opaklık · x y z (px, % veya em) · s sx sy ölçek · r rx ry döndürme (derece) · skx sky · blur · gray contrast bright sepia sat hue · clip: [üst, sağ, alt, sol] (%) · d süre (ms) · e ease. Her sayı { "base": 30, "phone": 12 } olabilir.

Nasıl akıcı kalır

• Yalnızca transform, opacity, filter ve clip-path canlanır; compositor üzerinde, Web Animations API ile.
• will-change yalnızca animasyon sürerken ayarlanır.
• Aktif olmayan slaytlar düz stillerle beklemeye alınır; ekran dışında çalışan animasyon olmaz.
• Bölünmüş yazı, cümlenin tamamını aria-label olarak tutar; parçalar ekran okuyuculardan gizlenir.
• Katman motoru (~9 KB) yalnızca bir slaytta data-in varsa yüklenir.