Atmosfer

Slaytların üzerinde ışık, doku ve derinlik: bir hero'yu prodüksiyon gibi hissettiren ayrıntılar. Her biri yalnızca kullanılınca yüklenen ayrı bir parçadır; ekran dışında durur, hareket azaltmada sabittir.

<style>
  body { padding: 0; }
  .wrap { position: relative; }
  .bar { position: absolute; z-index: 5; top: 12px; left: 12px; display: flex; gap: 8px; }
  select { font: 13px system-ui; padding: 6px 8px; border-radius: 8px; border: 0; }
</style>
<div class="wrap">
  <div class="bar">
    <select id="o" aria-label="Overlay">
      <option>none</option><option selected>beams</option><option>rays</option><option>light-leak</option><option>grain</option>
      <option>letterbox</option><option>vignette</option><option>scanlines</option><option>fog</option>
    </select>
    <select id="p" aria-label="Particles">
      <option selected>none</option><option>stars</option><option>warp</option><option>dust</option><option>snow</option>
      <option>embers</option><option>bokeh</option><option>fireflies</option><option>bubbles</option>
    </select>
  </div>
  <div id="s">
    <div><img data-bg src="https://picsum.photos/id/1018/1600/1000" alt="Mountains"></div>
    <div><img data-bg src="https://picsum.photos/id/1015/1600/1000" alt="Fjord"></div>
  </div>
</div>

<script type="module">
  const s = new InsigneSlider('#s', { overlay: 'beams', aspect: '16/9', autoplay: 5000 });
  const o = document.querySelector('#o');
  const p = document.querySelector('#p');
  o.onchange = p.onchange = () => s.update({ overlay: o.value, particles: p.value });
</script>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Overlay'ler

overlay: beams (yumuşak güneş ışınları), rays (yavaşça dönen ışık yelpazesi), light-leak, grain (film greni), letterbox (sinema bantları), vignette, scanlines, fog. Yalnızca CSS; her animasyon transform / opacity.

Parçacıklar

particles: stars, warp, dust, snow, embers, bokeh, fireflies, bubbles; yoğunluk için particleDensity (0,1–3). Önceden çizilmiş sprite'larla tek bir 2D canvas; düşük güçlü cihazlarda daha az parçacık, 30 fps. Slayt değişince alan hafifçe savrulur; warp hızlanır.

Kaydırma derinliği

scrollDepth (0–1): sayfa kayarken arka planlar ve yazılar farklı hızlarda hareket eder. Ayrı translate / scale özelliklerini kullandığı için Ken Burns ve katman animasyonlarıyla birlikte çalışır.

Kaydırmayla ilerleyen slider

scrollDrive: true ile sayfa kaydırması slaytları ilerletir: başka kütüphane olmadan scroll anlatımı. Slider adım adım değil, kaydırma konumuna doğru süzülerek ilerler.