Açılıştaki büyük imza ile navbar’daki logo aynı DOM öğesi. Kaydırma ilerlemesi iki ölçülmüş kutu arasında konuma ve ölçeğe eşleniyor; bu yüzden hiçbir anda iki logo üst üste binmiyor.
Ölçüm: iki kutu, bir öğe#
Hero içindeki boş bir yer tutucu, imzanın başlangıç kutusunu tanımlıyor. Navbar’daki boş yuva da bitiş kutusunu. Öğe position: fixed ve transform-origin: 0 0 ile her karede bu iki kutu arasında yeniden konumlanıyor.
const p = clamp01(scrollY / range)
const e = ease(p)
// Ölçeği log uzayında enterpole etmek küçülmeyi eşit hissettirir.
const scale = Math.exp(lerp(0, Math.log(end.w / start.w), e))
const x = lerp(start.x, end.x, e)
const y = lerp(start.y - scrollY, end.y, e)
el.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`Neden log uzayı?#
Doğrusal ölçek enterpolasyonunda öğe başta çok hızlı küçülür, sona doğru neredeyse durur. Log uzayında her eşit kaydırma adımı, boyutu aynı oranda değiştirir.
Font yüklenmesi ve yeniden ölçüm#
İmzanın kendisi SVG olduğu için font beklemiyor; ama hero’daki diğer metinler bekliyor. Bu yüzden document.fonts.ready ve bir ResizeObserver ile kutular yeniden ölçülüyor.
Hareket azaltma#
Sistem tercihi hareketi azaltmaksa ölçekleme hiç çalışmıyor. Hero kendi statik imzasını gösteriyor; navbar logosu, hero görünümden çıkınca yalnızca opaklıkla beliriyor.
Hareketin bir görevi olmalı: nereden gelip nereye gittiğini göstermek.
- Tek öğe, iki ölçülmüş kutu
- Kaydırmaya bağlı, zamanlayıcıya değil
- Hareket azaltmada sade alternatif