Adam'ın tamamen aksesuarlarla ilgili olduğu bir sır değil. Dostum bize bir süre önce renk, gölgeler, boyutlandırma, tipografi ve çok daha fazlası için önceden yapılandırılmış değişkenler için Open Props'u vermişti. Şimdi benzer bir fikir olan Prop For That ile geri döndü, ancak CSS'nin normalde tarayıcıda göremediği canlı sahne tabanlı şeyler yaratması açısından akıllara durgunluk veriyor. İmleç konumu, ilerleme değerleri, belirli form durumları, geçerli zaman, kaydırma hızı gibi şeyler, bilirsiniz, JavaScript'in koklayıp CSS'ye ilettiği şeyler.
Anladığım kadarıyla senaryoya dair tüm şeyler zaten arka planda. Gereken tek şey kitaplığı içe aktarmak, HTML'de bildirmek ve ardından CSS'de stillendirmek.
Örneğin, Chris uzun zaman önce imleç konumunu izlemek için JavaScript'te kayıtlı özel özelliklere sahip:
Önemli Gelişmeler
CodePen Yerleştirme Geri Dönüşü
Prop For That bunu güzelce kapsıyor. Aradaki fark, komut dosyalarını tetikleyen veri nitelikleriyle çalışıyor olmamızdır:
Gelecekte Ne Bekleniyor?
Ve ilgili aksesuarları stillere yerleştirin:
Teknik Analiz
.mover { en-boy oranı: 1; genişlik: 50 piksel; arka plan: kırmızı; konum: mutlak; sol: calc(var(--live-pointer-x, 0) * 1px); üst: calc(var(--live-pointer-y, 0) * 1px); }
CodePen Yerleştirme Geri Dönüşü
Detaylar ve Etkileri
Demolar olduğu yerde. Aman Tanrım, Adam klas bir çalışma hazırlayabilir mi?