English · Türkçe

scrollcraft

Kaydırmayla çalışan bir etkileşim motoru. Saf JavaScript, sıfır bağımlılık ve hiç DOM üretmiyor.

Kendi gerçek, anlamlı HTML'inizi yazıyorsunuz ve data-sc-* nitelikleriyle işaretliyorsunuz. Motor bunları okuyup her şeyi tek bir kaydırma değerinden, tek bir requestAnimationFrame döngüsünde sürüyor.

Bu kısıt bilerek konuldu. Bir yapılandırma nesnesinden kendi DOM'unu üreten motorlar dokundukları her siteyi birbirinin aynısı yapıyor — bu araç tam olarak onun yerine geçiyor. Size mekanizma ve sözlük veriyor; kompozisyon sizde kalıyor.

Hızlı başlangıç

<link rel="stylesheet" href="scrollcraft.css">

<section data-sc-act="pin" data-sc-span="2">
  <div class="sc-stage">
    <h2 data-sc-kinetic="words" data-sc-cue="0.05 0.75">Kaydırdıkça kelimeler geliyor</h2>
  </div>
</section>

<script src="scrollcraft.js"></script>
<script>ScrollCraft.mount(document.body)</script>

mount(root, opts) bir eleman ya da seçici alıyor, elinizde tutmanız gereken bir şey döndürmüyor. ScrollCraft.reduce hareket azaltmanın açık olup olmadığını söylüyor, ScrollCraft.instances kurulanları tutuyor.

Çalışan örnek example/ klasöründe — example/index.html dosyasını açın.

Aktlar — kaydırma zamanının birimi

Bir akt, kaydırmanın bir bölümüne sahip oluyor ve normalleştirilmiş bir ilerleme değeri p (0..1) üretiyor. Bu değer elemana --sc-p olarak yazılıyor, böylece CSS de okuyabiliyor.

<section data-sc-act="pin" data-sc-span="2.5"> … </section>

| | | | :--- | :--- | | data-sc-act | scrub · pin · pan · flow (varsayılan flow) | | data-sc-span | bu aktın sahiplendiği kaydırma, ekran yüksekliği cinsinden. Yalnız sabitlenen aktlarda. Varsayılan 1.5 |

Dış yüksekliği motor ayarlıyor ve ilk .sc-stage çocuğunu yapıştırıyor.

Aygıtlar — p neyi sürüyor

| Nitelik | Nerede | Ne yapıyor | | :--- | :--- | :--- | | data-sc-scrub | <video> | p, currentTime'ı sürüyor. Blob ile yüklendiği için sunucudan aralık desteği istemiyor | | data-sc-sequence="a/{i}.webp:120:1" | <canvas> | p bir görsel dizisini sürüyor — yol şablonu : kare sayısı : başlangıç numarası | | data-sc-pan="0.6" | geniş bir ray | yatay hareket; değer ek yol çarpanı | | data-sc-parallax="-0.2" | herhangi | oran × ilerleme × ekran kadar dikey kayma. Eksi değer uzaklaştırıyor | | data-sc-cue="0.1 0.5" | herhangi | p'ye bağlı saydamlık ve yükselme. Tek değer = giriş+bekleme, iki değer = giriş..çıkış | | data-sc-kinetic="lines" | metin | lines · words · chars. Metni bölüp işaret penceresi boyunca sıralıyor | | data-sc-reveal="up" | herhangi | up · down · left · right · iris — clip-path ile silme | | data-sc-count="0 4200" | herhangi | işaret penceresi boyunca sayı sayma | | data-sc-in | akış bölümü | girişte bir kez çalışan açılış. data-sc-stagger="60" çocukları sıralıyor | | data-sc-drift="#07090c" | akt | akt ekrandayken sayfa zemini bu renge doğru geçiyor | | data-sc-progress | herhangi | kaydırdıkça motor dolduruyor; kendi görselini çizmiyor |

Worldflight — tek parça kamera hareketi

Aktlar sayfayı sabitlenmiş bloklara bölüyor. Bölümlerden oluşan bir sayfa için doğru, tek parça kesintisiz bir uçuş için yanlış: okuyucu aktın sonuna geliyor, sahne çözülüyor, sabit bir sayfa geçiyor ve sonraki akt her şeye baştan başlıyor.

Worldflight blokları kaldırarak dikişleri kaldırıyor. Tüm sayfa için tek bir sabit sahne var. Akışta duran tek eleman, yüksekliğini motorun bölüm ağırlıklarının toplamından hesapladığı bir boşluk. Bütün klipler sayfa boyunca bağlı kalıyor ve bölümler bir dikiş bandında birbirine geçiyor — hiçbir zaman src değişmiyor, çünkü src değişimi siyah bir kare demek ve bu mod tam olarak o kesmeyi önlemek için var.

| | | | :--- | :--- | | data-sc-w | bu bölümün sahiplendiği ekran yüksekliği. Varsayılan 1.3 | | data-sc-linger | yalnız bu ayak için bekleme eğrisi. En fazla 0.6 | | data-sc-seam | geçiş bandı, ekran yüksekliği cinsinden. Varsayılan 0.12 | | data-sc-waypoint | --sc-seg ve sc:waypoint olayıyla yayımlanan etiket; sayfa kendi rota şeridini çizebilsin diye. Motor hiçbir şey çizmiyor | | data-sc-window | metin bloğunda: hero · finale · from to [in [out]] — tüm parkurun kesri olarak |

İşaretleyici — kaydırma olmayan etkileşim

| | | | :--- | :--- | | data-sc-tilt="8" | imlece doğru 3B eğilme, yaylı sönümlü, derece cinsinden | | data-sc-magnet="0.35" | eleman kendi sınırları içinde imlece doğru kayıyor | | data-sc-spotlight | imleci takip eden bir ışık için --sc-mx / --sc-my (0..1) yayımlıyor |

Üçü de (hover: hover) ve (pointer: fine) ile sınırlı ve hareket azaltmada kapalı. Dokunmatikte hiç çalışmıyor.

Hareket azaltma

Sıfır değil, daha az ve daha yumuşak. İşaretler yine soluklaşıyor, böylece metnin anlaşılırlığı bozulmuyor. Yer değiştirmeler kalkıyor, video klipleri hiç indirilmiyor (afiş görseli kalıyor) ve imleç aygıtları çalışmıyor. Bir worldflight yine tüm hikâyesini anlatıyor: afişler aynı dikişlerde ve aynı metin pencerelerinde birbirine geçiyor.

Ray bu kuralın istisnası. Onun hareketini paralaks gibi sıfırlamak aktı ilk ekrana park eder ve kıvrımın ötesindeki her şeyi ulaşılamaz yapardı — içeriği erişilemez hale getirerek bozulan bir aygıt erişilebilirlik kazancı değil.

Oynatma kafası

Sayfadaki her klip — akt olsun worldflight olsun — tek bir yumuşatılmış oynatma kafasından sürülüyor. Kaydırma yalnızca bir hedef yazıyor; ayrı bir döngü geçerli zamanı her karede sabit bir oranla o hedefe doğru yürütüyor (data-sc-lerp, varsayılan 0.18; hareket azaltmada 1.0, yani hiç yumuşatma yok).

Yumuşatma olmadan izmerkez hareketi takılma gibi okunuyor, çünkü tekerlek olayları sabit aralıklarla gelmiyor ve birebir yazma o boşlukların hepsini ekrana taşıyor.

Sınıf sözlüğü — tek tuzak

İki aile var ve karıştırınca ısırıyor:

| Sınıf | Nereye ait | | :--- | :--- | | .sc-body · .sc-lede · .sc-display · .sc-label | akan metin. .sc-body satır uzunluğunu okuma ölçüsüyle sınırlıyor — paragraf sınıfı, sayfa sınıfı değil. <body> etiketine konunca tüm belge yaklaşık 700px'e kilitleniyor | | .sc-copy · .sc-copy--lead · .sc-copy--center · .sc-copy--trail | sahne üstü katman. Bunlar position: absolute ve en yakın konumlanmış atalarına tutunuyor. Akış bölümünde kullanılırsa sayfanın tepesine kaçıyorlar |

.sc-stage position: sticky, yani içindeki bir .sc-copy'nin tutunduğu kutu o. İkisinin birlikte kullanımı amaçlanan kullanım.

Biçimlendirme

scrollcraft.css iki katman ve bu ayrım önemli:

• Simgeler (tokens) — markaya göre değiştireceğiniz yer. Renk rolleri, yazı ölçeği, boşluk ölçeği, yükselti, hareket. Bir marka yaklaşık on iki değer; altı renk rolünü değiştirince sayfa yeniden markalanıyor.
• Aygıtlar — motorun sürdüğü şeyler. Bunları zevke göre yeniden biçimlendirmeyin, mekanizmanın kendisi. Kendi işaretlemenizi biçimlendirin.

Kart, rozet, hap sınıfı yok; çünkü bunları taşıyan bir stil dosyası, üzerine kurulan her sayfanın aynı şekillere sahip olmasının sebebi.

Stil dosyası zorunlu — aygıtlar ona bağlı. Belge yönünü okuduğu için sağdan sola bir sayfada ray ikinci bir nitelik gerekmeden ters yöne kayıyor.

Lisans

MIT — LICENSE. İstediğiniz gibi kullanın, değiştirin, satın.

hanzala.com.tr için yazıldı, orada üretimde çalışıyor.