Slider Revolution'dan geçiş

Slider Revolution görsel bir editör; Insigne bir kez yazdığınız koddur. Zihinsel model birebir örtüşür (modül, slaytlar, katmanlar, zaman çizelgeleri) ama her kavram bir attribute'a dönüşür.

Kavramlar

Slider Revolution	Insigne
Modül	Slider elemanı (<insigne-slider> veya [data-insigne])
Slayt	Doğrudan çocuk eleman
Slayt arka plan görseli	<img data-bg> (alt ve srcset'i olan gerçek bir görsel)
Arka plan konumu / "fit"	data-focus, data-safe, fit; her ekranda gözetilir
Ken Burns	kenBurns / data-ken-burns
Katman	Slaytın içindeki herhangi bir eleman
Katman "in" animasyonu	data-in="reçete"
Katman "out" animasyonu	data-out (veya girişin tersi)
Bölünmüş yazı (harf, kelime, satır)	Reçete split veya data-split
Başlangıç zamanı	data-delay (ms)
Döngü animasyonu, hover durumu	Reçete loop ve hover kareleri
Slayt geçişi	effect (WebGL dahil 40 geçiş)
Transition pack eklentisi	Dahil: 13 WebGL efekt
Particles eklentisi	particles
Fare / kaydırma parallax	data-parallax, scrollDepth, scrollDrive
Responsive seviyeler (5 cihaz boyutu)	Gerekmez: konteyner tabanlı düzen; değişiklik istediğinizde breakpoints
Modül JSON'u	InsigneSlider.create(el, spec): sizin, belgelenmiş JSON'unuz

Katmanlar

Slider Revolution'da bir katman her cihaz için piksel koordinatlarına yerleştirilir. Insigne'de katman sıradan HTML'dir ve kendi CSS'inizle konumlanır; doğal olarak akar:

<div>
  <img data-bg src="hero.jpg" alt="" data-focus="70% 40%">
  <div class="metin">          <!-- sizin CSS'iniz: konum, genişlik, tipografi -->
    <small data-in="fade">Yeni koleksiyon</small>
    <h1 data-in="chars-up">Sonbahar / Kış</h1>
    <a class="btn" href="/magaza" data-in="rise" data-delay="600">Alışverişe başla</a>
  </div>
</div>

Slider ile ölçeklenen yazı için konteyner birimleri (cqi) veya clamp() kullanın.

Veri olarak zaman çizelgeleri

Her giriş bir reçetedir (bir kare listesi); kopyalayıp ayarlayabilirsiniz. Bkz. katmanlar ve reçeteler referansı.

İçeriği WordPress'ten taşımak

Slaytlarınızın görsellerini ve metinlerini dışa aktarın; sonra ya tema şablonunuzda data-insigne ile işaretlemeyi üretin ya da JSON olarak tutup InsigneSlider.create() çağırın. İkisi de WordPress, Laravel, statik siteler ve SPA'larda çalışır.