Mengembangkan Scroll Bar Buddy yang turun mengikuti halaman saat digulir

• Scroll Buddy adalah prototipe pertama yang mengganti scrollbar biasa menjadi karakter animasi yang berjalan di sisi halaman, sehingga aktivitas menggulir itu sendiri menjadi interaksi kecil
• Implementasi saat ini berbentuk manusia stik yang bergerak naik turun sesuai posisi gulir, sebagai eksperimen untuk mengubah scrollbar yang membosankan menjadi elemen dekoratif yang menyenangkan
• Kandidat berikutnya yang diajukan adalah skateboarder, rock climber, dan squirrel, dan mereka juga menerima ide karakter lainnya
• Tersedia formulir pendaftaran bagi pengguna yang ingin menerapkannya di situs web mereka
• Contoh di sisi halaman memiliki gerakan sehingga bisa membebani pembaca yang memiliki mabuk gerak vestibular, dan seharusnya disembunyikan di sebagian besar browser ketika pengaturan reduce motion aktif

---

Prototipe yang mengubah scrollbar menjadi karakter

• Scroll Buddy adalah eksperimen yang mengubah scrollbar dari sekadar elemen UI menjadi karakter animasi yang bergerak mengikuti sisi halaman saat pengguna menggulir
• Prototipe pertama menggunakan karakter manusia stik yang berjalan naik turun ketika pengguna menggulir
• Kandidat untuk versi berikutnya mencakup skateboarder, rock climber, squirrel, dan bentuk Scroll Buddy lainnya

Pendaftaran penerapan di situs web

• Tersedia tautan pendaftaran bagi pengguna yang ingin menambahkan Scroll Buddy ke situs web mereka
• Get a scroll buddy for your website

Perhatian aksesibilitas terkait gerakan

• Contoh tersemat di sisi halaman mencakup animasi dan gerakan
• Bagi pembaca yang memiliki mabuk gerak vestibular, disarankan mengaktifkan fitur reduce motion pada perangkat sebelum melihat animasi
• Jika pengaturan reduce motion aktif, Scroll Buddy seharusnya disembunyikan di sebagian besar browser

Petunjuk implementasi dan susunan halaman

• Halaman tersebut memiliki judul bagian yang menyatakan dibuat dengan simple javascript
• Setelah itu, sebagian besar isi halaman adalah teks dummy lorem ipsum untuk membuat area gulir

[GN⁺]

Opini Hacker News

• Bagus! Belum sempat membuatnya dengan kode, tapi aku pernah punya ide hamster berparasut
  Ia perlahan jatuh ke bawah halaman, lalu saat pengguna menggulir cepat, ia membuka parasut dan mendarat lagi di dasar viewport; saat kursor diarahkan ke atasnya, ia mengangkat papan bertuliskan “Top”; saat diklik, ia terbang ke atas dengan jetpack, lalu ketika layar mencapai bagian paling atas, ia membuka parasut lagi dan turun dengan mulus

  • Sekarang aku jadi menginginkan ini. Entah kenapa rasanya hamster itu akan mirip gopher milik bahasa Go, tentu saja bukan berwarna biru
  • Menunggu tautan repositori. Aku akan menambahkan fork di mana jika hamsternya menggulir terlalu cepat, ia tidak sempat membuka parasut lagi dan pengguna “kalah”
    Mungkin bisa membantu menahan kebiasaan menggulir?
  • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
    Penafian: Aku tidak menulis satu baris pun sendiri; ini dibuat dengan Claude 3.7 sebagai Kagi assistant, direvisi sekitar 10 kali dalam satu percakapan. Yang kulakukan cuma menempelkan emoji ke prompt
    Aku belum pernah benar-benar mengode sesuatu yang bermakna dengan HTML dan JS
    Edit: agak lucu juga, di tempat yang begitu banyak membahas AI, ketika aku menempelkan kode buatan AI yang berfungsi, reaksi pertama yang kuterima adalah downvote. Sepertinya lebih banyak yang membenci AI daripada menyukai hamster
  • Saat menggulir ke atas, bagusnya muncul hamster berjetpack/roket

• Untuk hal seperti ini, rasanya memang sebaiknya dinonaktifkan kalau pengguna mengatur prefers-reduced-motion
  https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
  Untuk menyembunyikan karakter saat diperlukan, cukup tambahkan satu aturan CSS:
  @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

  • Sepertinya pembuatnya sudah mengimplementasikan ini. Sekarang orang seperti aku hanya melihat halaman lorem ipsum yang tidak berarti
    Menurutku demo boleh dikecualikan dari filter seperti ini, apalagi jika hanya bisa dibuka lewat tautan yang jelas
    Kode yang sama yang membuatnya menghilang juga bisa menambahkan teks yang menjelaskan “mengapa dinonaktifkan”. Dalam kasusku ini karena Apple Menu > System Preferences > Accessibility > Display > Reduce motion; untuk OS lain lihat https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
    Pengaturan ini menghilangkan animasi kecil di macOS sehingga terasa lebih responsif. Kalau bukan karena komentar ini, mungkin selama bertahun-tahun aku tidak akan tahu bahwa itu juga memengaruhi situs web
  • Mungkin alasan persis aku menyalakan “kurangi gerakan” memang untuk hal seperti ini, tapi implementasi yang ini sebenarnya cukup tidak berbahaya, jadi agak disayangkan
  • Kuharap pembuat situsnya tidak melihat komentar ini. Aku butuh waktu cukup lama untuk memahami kenapa tidak terlihat di browser mana pun
  • Tepat sekali. Seharusnya sekarang sudah diperbaiki untuk pengguna yang mengaktifkan pengaturan itu

• Kenapa belum ada yang bilang ini seharusnya disebut Stroll Bar?

  • Sayangnya nama itu sudah dipakai, jadi aku membeli scrollbuddy.com dan akan menyiapkannya agar orang-orang bisa segera mengimplementasikannya

• Daripada scrollbar yang membosankan, kupikir akan menyenangkan kalau ada manusia stik animasi yang berjalan naik-turun di sisi halaman saat kita menggulir
  Ini prototipe pertamanya
  Berikutnya aku berencana membuat skateboarder, pemanjat tebing, dan tupai; teman scroll apa lagi yang bagus dibuat?

  • Dua orang sedang memompa railcar
    Atau orang-orang yang mendayung pegangan scrollbar; semakin panjang pegangannya, semakin banyak pendayungnya
  • Beberapa minggu lalu aku melihat versi ulat seperti ini -> https://x.com/trunarla/status/1893705260142657764
  • Ide yang sangat keren. Kalau boleh mengusulkan, saat karakternya naik, ia bisa menaburkan jejak remah roti di belakangnya lalu memungutnya kembali, atau menendangnya keluar layar
  • Dua ide pertama untuk ‘berinovasi’ pada ini adalah mobil yang melaju ke bawah halaman, atau lampu yang menghitung mundur dengan pola ‘full tree’ seperti Christmas tree drag racing
  • Bagaimana kalau tetesan hujan? Tidak ada yang waktu kecil pernah menyemangati balapan tetesan hujan saat perjalanan jauh di mobil?
    Apel yang jatuh ke kepala Newton juga bagus
    Membayangkannya saja sudah menyenangkan

• Aku terkejut rasanya cuma aku yang mau bertanya: kenapa cara implementasinya disembunyikan di balik Google Form?
  Edit: detail implementasinya sebenarnya bisa langsung diakses dari DOM. Untuk orang yang tidak ingin memberikan email, aku membuat gist yang mengekstrak bagian terkait:
  https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

  • Aku tidak paham. Kalau menulis sesuatu lalu tidak ingin membagikannya, ya sudah, tapi meminta pengumpulan alamat email sebagai imbalan untuk menyediakannya terasa sangat aneh
  • Dalam kondisi saat ini, kode tanpa lisensi eksplisit tidak bisa digunakan. Kode yang diunggah itu juga tidak punya lisensi, tetapi mungkin bisa diperoleh dengan menghubungi pembuatnya
    Menggunakan kode yang ditautkan bisa menjadi pelanggaran hak cipta
  • Ia ingin dibayar atas pekerjaannya bukan dengan uang, melainkan dengan perhatian. Kelihatannya cukup masuk akal

• Apa yang kulewatkan? Di Firefox dan Chrome aku tidak melihat apa pun selain scrollbar
  Apa karena warna scrollbar kustom yang kuatur?

  • Mungkin kamu mengaktifkan kurangi gerakan di OS? Karakternya dinonaktifkan untuk menghormati pengaturan itu
  • Mungkin juga karena ini: https://news.ycombinator.com/item?id=43237747
  • Di Android Firefox dan Android Chrome tidak terlihat, di Windows Chrome terlihat
  • Aku juga sama, tidak terjadi apa-apa

• Ini mengingatkanku pada akhir 90-an, saat orang-orang menambahkan efek visual di situs web seperti salju turun atau ekor percikan api yang mengikuti mouse

  • Benar, DHTML Zone dulu jadi tempat utama untuk mengambil efek visual surealis yang membuat browser pengguna lumpuh. Demi membuat situs web terlihat sangat keren
  • Sekarang juga bisa mengingatkan pada iMessage di iOS 18. Aku baru saja upgrade dan emoji serta efek teks barunya terasa punya nuansa tahun 2000-an

• Aku suka proyek seperti ini karena mengingatkanku pada internet lama

  • Reaksiku juga sama, rasanya seperti seseorang membuat sesuatu yang menyenangkan dan keren hanya karena ingin mencobanya
  • Lebih banyak marquee!
  • Seperti HN lama!

• Kenapa ini berada di balik Google Form...? Bahkan tidak ada tangkapan layar seperti apa bentuknya sebelum mengumpulkan alamat email
  Aneh tulisan seperti ini bisa masuk frontpage

  • Cukup tetap di halaman itu. Jangan klik tautan “Get a scroll buddy for your website”
  • Di halaman yang ditautkan pratinjaunya terlihat, tapi tetap aneh kalau cara menggunakannya hanya bisa didapat lewat email
  • Tidak begitu. Saat kubuka halamannya, itu berfungsi dengan baik
    Mungkin kamu menonaktifkan CSS, atau melewatkan implementasi di samping scrollbar. Coba lihat komentar-komentar lain

• Lucu dan cerdas
  Kalau aku pengembang, aku akan membuat versi di mana saat menggulir ke atas, manusia stiknya bergerak mundur sambil melakukan moonwalk

  • Mungkin ini pertanyaan bodoh, tapi kalau kamu bukan pengembang, aku penasaran bagaimana kamu bisa sampai ke HN