Kaydırma sırasında sayfayı takip eden Scroll Bar Buddy geliştirildi

• Scroll Buddy, mevcut kaydırma çubuğunu sayfanın yanında yürüyen animasyonlu bir karaktere dönüştürerek kaydırmanın kendisini küçük bir etkileşim hâline getiren ilk prototip
• Mevcut uygulama, kaydırma konumuna göre yukarı aşağı hareket eden çöp adam biçiminde; sıkıcı kaydırma çubuğunu eğlenceli bir dekoratif öğeye dönüştürmeyi amaçlayan bir deney
• Sonraki adaylar olarak skateboarder, rock climber ve squirrel önerildi; başka karakter fikirleri de kabul ediliyor
• Bunu web sitesine eklemek isteyen kullanıcılar için bir başvuru formu sunuluyor
• Sayfanın yan tarafındaki örnek hareket içerdiğinden vestibüler kaynaklı hareket hassasiyeti olan okurlar için rahatsız edici olabilir; reduce motion ayarı açık olan çoğu tarayıcıda gizlenmesi gerekir

---

Kaydırma çubuğunu karaktere dönüştüren prototip

• Scroll Buddy, kaydırma çubuğunu basit bir UI öğesi olmaktan çıkarıp, kaydırırken sayfanın yanında hareket eden animasyonlu bir karaktere dönüştüren bir deney
• İlk prototip, kullanıcı kaydırdıkça yukarı aşağı yürüyen çöp adam karakterini kullanıyor
• Sonraki sürüm adayları arasında skateboarder, rock climber ve squirrel gibi farklı Scroll Buddy biçimleri bulunuyor

Web sitesine ekleme başvurusu

• Scroll Buddy’yi web sitesine eklemek isteyen kullanıcılar için bir başvuru bağlantısı sunuluyor
• Web siteniz için bir scroll buddy alın

Hareketle ilgili erişilebilirlik uyarısı

• Sayfanın yan tarafındaki gömülü örnek animasyon ve hareket içeriyor
• Vestibüler kaynaklı hareket hassasiyeti olan okurların animasyonu görmeden önce cihazlarının reduce motion özelliğini açmaları öneriliyor
• Reduce motion ayarı açıksa çoğu tarayıcıda Scroll Buddy’nin gizlenmesi gerekir

Uygulama ve sayfa yapısına dair ipuçları

• Sayfada simple javascript ile yapıldığına dair bir bölüm başlığı bulunuyor
• Metnin sonraki büyük kısmı, kaydırma oluşturmak için kullanılan lorem ipsum yer tutucu metninden oluşuyor

[GN⁺]

Hacker News yorumları

• Güzelmiş! Henüz kodlamadım ama paraşütlü hamster fikrim vardı
  Sayfanın aşağısına doğru yavaşça düşer, hızlı kaydırınca paraşütünü açıp tekrar görünüm alanının altına iner, üstüne gelince “Top” tabelası tutar, tıklayınca da jetpack’le yukarı fırlar ve ekran en üste ulaşınca tekrar paraşüt açıp yumuşakça aşağı süzülür

  • Şimdi bunu gerçekten istiyorum. Nedense hamsterın Go dilinin gopher’ına benzeyeceğini düşünüyorum, tabii mavi olmaz
  • Depo linkini bekliyorum. Hamster çok hızlı kaydırınca paraşütünü tekrar açamasın ve kullanıcı “kaybetsin” diye bir fork ekleyeceğim
    Belki kaydırmayı dizginlemeye yardımcı olur?
  • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
    Not: Tek satırını bile kendim yazmadım; Claude 3.7’yi Kagi assistant ile kullanıp tek bir sohbet içinde yaklaşık 10 kez düzenleyerek yaptım. Yaptığım tek şey prompt’a emojileri yapıştırmaktı
    HTML ve JS ile anlamlı bir şey kodlamışlığım yok
    Düzenleme: AI’dan bu kadar çok söz edilen bir yerde AI üretimi kod yapıştırıp ilk aldığım tepkinin eksi oy olması biraz komik. Görünüşe göre insanlar hamsterdan çok AI’dan nefret ediyor
  • Yukarı kaydırırken jetpack/roket hamster olsa güzel olurdu

• Kullanıcı prefers-reduced-motion ayarı yaptıysa bunun devre dışı bırakılması doğru görünüyor
  https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
  Karakteri gerektiğinde gizlemek için tek bir CSS kuralı eklemek yeterli:
  @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

  • Görünüşe göre yazar bunu uygulamış. Artık benim gibiler sadece anlamsız lorem ipsum sayfasını görüyor
    Bence demolar bu tür filtrelerden muaf olabilir, özellikle de yalnızca açık bir bağlantıyla girilebiliyorsa
    Onu görünmez yapan aynı kod, “neden devre dışı bırakıldığına” dair bir açıklama da ekleyebilirdi. Benim durumumda sebep Apple Menu > System Preferences > Accessibility > Display > Reduce motion, diğer işletim sistemleri için ise https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... bağlantısına bakılabilir
    Bu ayar macOS’teki küçük animasyonları kaldırıp sistemi daha çevik hissettiriyor. Bu yorum olmasa bunun web sitelerini de etkilediğini yıllarca fark etmezdim
  • Muhtemelen “hareketi azalt”ı açık tutmamın tam nedeni bu tür şeyler, ama bu uygulama oldukça zararsız olduğu için biraz üzücü
  • Umarım site yazarı bu yorumu görmemiştir. Neden hiçbir tarayıcıda görünmediğini anlamam epey zaman aldı
  • İyi yakalamışsın. Bu ayarı açmış kullanıcılar için şimdi düzeltilmiş olmalı

• Neden kimse buna Stroll Bar denmesi gerektiğini söylemedi?

  • Ne yazık ki o isim çoktan alınmış, bu yüzden scrollbuddy.com’u satın aldım ve insanların yakında kendi uygulamalarını yapabilmesi için hazırlamayı planlıyorum

• Sıkıcı bir kaydırma çubuğu yerine, kaydırırken sayfanın kenarında yukarı aşağı yürüyen animasyonlu bir çöp adam olmasının eğlenceli olacağını düşündüm
  Bu da ilk prototip
  Sırada kaykaycı, dağcı ve sincap var; başka ne tür kaydırma arkadaşları yapılabilir?

  • İki kişinin drezin pompalaması
    Ya da kaydırma çubuğu tutamacını kürek çeken insanlar; tutamak ne kadar uzunsa o kadar çok kürekçi olur
  • Birkaç hafta önce bunun tırtıl versiyonunu görmüştüm -> https://x.com/trunarla/status/1893705260142657764
  • Harika bir fikir. Bir öneri olarak, karakter arkasında ekmek kırıntısı izi bırakabilir ve yukarı çıkarken onları tekrar toplayabilir ya da ekran dışına itebilir
  • Bunu “yenileştirmek” için aklıma gelen ilk iki fikir, sayfanın altına doğru giden bir araba ya da ışıkların drag racing Christmas tree gibi “full tree” tarzında geri sayım yaptığı bir sistemdi
  • Yağmur damlaları nasıl olur? Çocukken uzun araba yolculuklarında yağmur damlası yarışı tutmamış kim var ki?
    Newton’un kafasına düşen bir elma da güzel olurdu
    Düşünmesi bile eğlenceli

• Bunu soracak tek kişi benmişim gibi görünmesine şaşırdım ama, neden uygulama yöntemini Google Form’un arkasına sakladınız?
  Düzenleme: Uygulama ayrıntılarına aslında doğrudan DOM üzerinden erişilebiliyor. E-posta vermek istemeyenler için ilgili kısmı çıkarıp bir gist yaptım:
  https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

  • Anlamıyorum. Yazıp paylaşmak istememeyi bir yere kadar anlarım ama bunu sunmanın karşılığında e-posta adresi toplamak çok tuhaf
  • Şu anki haliyle açık bir lisansı olmayan kod kullanılamaz. Paylaşılan kodun da lisansı yok ama yazara ulaşırsanız alabilirsiniz
    Bağlantı verilen kodu kullanmak telif hakkı ihlali olabilir
  • Yaptığı işin karşılığını para yerine ilgi olarak almak istiyor. Bana oldukça makul geliyor

• Ben neyi kaçırıyorum? Hem Firefox’ta hem Chrome’da kaydırma çubuğundan başka hiçbir şey görünmüyor
  Sebep benim ayarladığım özel kaydırma çubuğu renkleri olabilir mi?

  • İşletim sisteminde hareketi azalt açık olabilir mi? Bu ayara saygı duyulduğu için karakter devre dışı kalıyor
  • Muhtemelen sebep şu da olabilir: https://news.ycombinator.com/item?id=43237747
  • Android Firefox ve Android Chrome’da görünmüyor, Windows Chrome’da görünüyor
  • Bende de aynı, hiçbir şey olmuyor

• Bu bana 90’ların sonlarında insanların sitelere kar efekti ya da imleci takip eden ateş kuyruğu gibi görsel efektler eklediği günleri hatırlattı

  • Evet, DHTML Zone kullanıcıların tarayıcısını kilitleyen rüya gibi görsel efektlerin alındığı klasik yerdi. Web sitesini aşırı havalı göstermek için
  • Artık bana iOS 18’deki iMessage’ı da hatırlatıyor. Az önce yükselttim ve yeni emojiyle metin efektlerinde tam bir 2000’ler havası aldım

• Bu tür projelerin eski interneti hatırlatmasını seviyorum

  • Ben de aynı tepkiyi verdim; sanki biri sadece eğlenceli ve havalı bir şey yapmak istemiş gibi
  • Daha fazla marquee!
  • Eski HN gibi!

• Neden bu Google Form’un arkasında...? E-posta adresi toplanmadan önce nasıl göründüğüne dair bir ekran görüntüsü bile yok
  Böyle bir gönderinin ana sayfaya çıkması garip

  • Sadece sayfada kalmak yeterli. “Get a scroll buddy for your website” bağlantısına tıklamaman yeterli
  • Bağlantı verilen sayfada önizleme görünüyor ama yine de nasıl kullanılacağının yalnızca e-postayla verilmesi garip
  • Hayır öyle değil. Sayfayı açtım ve gayet çalıştı
    Muhtemelen CSS’yi devre dışı bıraktın ya da kaydırma çubuğunun yanındaki uygulamayı fark etmedin. Diğer yorumlara bakabilirsin

• Eğlenceli ve zekice
  Ben geliştirici olsaydım, yukarı kaydırırken çöp adamın geriye doğru gidip moonwalk yaptığı bir sürüm yapardım

  • Belki biraz aptalca bir soru ama, geliştirici değilsen HN’ye nasıl geldin merak ettim