Efektler ve geçişler

effect ayarını 40 geçişten birine verin. Her biri slaytın konumunun bir fonksiyonudur: sürüklemek geçişi ileri geri oynatır, bırakmak parmağınızın hızıyla devam eder.

<style>
  label { font: 14px system-ui; display: block; margin-bottom: 12px; }
  select { font: 14px system-ui; padding: 6px 10px; border-radius: 8px; margin-left: 6px; }
</style>
<label>Effect <select id="fx"></select></label>
<div id="s">
  <div><img data-bg src="https://picsum.photos/id/1018/1400/900" alt="Mountains"></div>
  <div><img data-bg src="https://picsum.photos/id/1036/1400/900" alt="Snow"></div>
  <div><img data-bg src="https://picsum.photos/id/1043/1400/900" alt="City"></div>
  <div><img data-bg src="https://picsum.photos/id/1050/1400/900" alt="Sea"></div>
</div>

<script type="module">
  const slider = new InsigneSlider('#s', { effect: 'cube', aspect: '16/9' });
  const sel = document.querySelector('#fx');
  for (const name of InsigneSlider.effects) sel.add(new Option(name, name, false, name === 'cube'));
  sel.onchange = () => {
    slider.update({ effect: sel.value });
    slider.next();
  };
</script>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

CSS efektleri (27)

Aile	Efektler
Hareket	slide (varsayılan), parallax, stack, uncover
Solma ve odak	fade, blur, zoom
3D	cube, flip, coverflow, cards, rotate, creative
Maskeler	wipe, curtain, iris, diagonal, blinds, split, shutter, boxes, diamond, clock
Etkileyici	warp, product, sketch, glitch

coverflow ve slide aynı anda birden fazla slayt gösterebilir; diğerleri tek slayt gösterir.

İnce ayar

• speed (ms) ve ease (auto, expo.out, power3.out, back.out…).
• coverflowRotate, coverflowDepth, coverflowStretch, slideShadows.
• creative: önceki ve sonraki slaytı kendiniz tarif edin:

new InsigneSlider(el, {
  effect: 'creative',
  creative: {
    prev: { translate: ['-20%', 0, -400], rotate: [0, 0, -6], opacity: 0.4 },
    next: { translate: ['100%', 0, 0] },
  },
});

WebGL efektleri (13)

heat-haze, ripple, liquid, rgb-glitch, pixel-dissolve, zoom-blur, swirl, page-curl, ink, god-rays, warp-speed, water, luma-morph; her geçişte farklı biri için random-gl.

<insigne-slider effect="ripple" shader-origin="pointer" shader-intensity="1.2">

• Shader parçası (~8 KB gzip) yalnızca bir WebGL efekti kullanılınca yüklenir.
• Dairesel efektler tıklamadan (shaderOrigin: "pointer"), merkezden veya özel bir noktadan başlar.
• Yedek: WebGL yoksa, düşük güçlü cihazlarda (gpu: "auto"), hareket azaltmada veya bir görselin CORS başlığı yoksa benzer bir CSS efekti oynar. Başka domaindeki görseller Access-Control-Allow-Origin gerektirir.

Hareket azaltma

prefers-reduced-motion açıkken 3D ve WebGL efektleri fade olur, geçişler kısalır, otomatik oynatma ve Ken Burns kapanır, katmanlar hareketsiz görünür. Yalnızca slider'ınızda büyük hareket yoksa reducedMotion: "never" ile değiştirin.