Phát triển Scroll Bar Buddy đi theo trang khi cuộn

• Scroll Buddy là nguyên mẫu đầu tiên biến thanh cuộn hiện có thành một nhân vật hoạt hình đi dọc bên cạnh trang, khiến chính thao tác cuộn trở thành một tương tác nhỏ
• Bản hiện tại được triển khai dưới dạng người que di chuyển lên xuống theo vị trí cuộn, là một thử nghiệm nhằm biến thanh cuộn vốn nhàm chán thành một yếu tố trang trí thú vị
• Các ứng viên tiếp theo được đề xuất gồm skateboarder, rock climber và squirrel, đồng thời cũng đang nhận thêm ý tưởng nhân vật khác
• Có biểu mẫu đăng ký dành cho người muốn áp dụng lên website của mình
• Ví dụ ở cạnh trang có chuyển động nên có thể gây khó chịu cho độc giả bị chóng mặt do rối loạn tiền đình, và cần được ẩn trong hầu hết trình duyệt khi bật cài đặt reduce motion

---

Nguyên mẫu biến thanh cuộn thành nhân vật

• Scroll Buddy là một thử nghiệm biến thanh cuộn từ một thành phần UI đơn thuần thành một nhân vật hoạt hình di chuyển dọc theo cạnh trang khi cuộn
• Nguyên mẫu đầu tiên sử dụng nhân vật người que đi lên xuống khi người dùng cuộn trang
• Các phiên bản ứng viên sau đó có thể là những dạng khác như skateboarder, rock climber và squirrel

Đăng ký áp dụng cho website

• Có cung cấp liên kết đăng ký cho người dùng muốn thêm Scroll Buddy vào website của mình
• Get a scroll buddy for your website

Lưu ý về khả năng truy cập đối với chuyển động

• Ví dụ nhúng ở cạnh trang có chứa hoạt ảnh và chuyển động
• Với độc giả bị chóng mặt do rối loạn tiền đình, nên bật tính năng reduce motion trên thiết bị trước khi xem hoạt ảnh
• Khi cài đặt reduce motion được bật, Scroll Buddy cần được ẩn trong hầu hết trình duyệt

Manh mối về cách triển khai và bố cục trang

• Trang có một tiêu đề mục cho biết nó được làm bằng simple javascript
• Phần lớn nội dung phía sau là văn bản giả lorem ipsum để tạo phần cuộn

[GN⁺]

Ý kiến trên Hacker News

• Hay đấy! Tôi chưa viết thành code, nhưng từng có ý tưởng về chú hamster nhảy dù
  Nó sẽ từ từ rơi xuống phía dưới trang, nếu cuộn nhanh thì bung dù để đáp lại xuống đáy viewport; khi rê chuột lên thì giơ biển “Top”, còn khi bấm vào thì bay ngược lên bằng jetpack, rồi khi màn hình chạm tới đầu trang thì lại bung dù và hạ xuống nhẹ nhàng

  • Giờ tôi muốn có cái này rồi. Không hiểu sao tôi tưởng chú hamster trông sẽ hơi giống gopher của ngôn ngữ Go, tất nhiên là không phải màu xanh
  • Đang chờ link repository. Tôi sẽ thêm một fork trong đó nếu hamster cuộn quá nhanh thì không kịp bung lại dù và người dùng “thua”
    Biết đâu giúp hạn chế việc cuộn quá nhiều?
  • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
    Miễn trừ trách nhiệm: tôi không tự viết dòng nào; tôi dùng Claude 3.7 qua Kagi assistant và sửa khoảng 10 lần trong một cuộc trò chuyện để tạo ra nó. Việc tôi làm chỉ là dán emoji vào prompt
    Tôi chưa từng code thứ gì có ý nghĩa bằng HTML và JS
    Sửa: cũng hơi buồn cười là ở một nơi nói rất nhiều về AI, tôi đăng code do AI tạo và chạy được thì phản hồi đầu tiên nhận được lại là downvote. Có vẻ mọi người thích ghét AI hơn thích hamster
  • Khi cuộn lên thì nên có hamster jetpack/tên lửa

• Những thứ như thế này có lẽ nên tắt nếu người dùng đã bật prefers-reduced-motion
  https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
  Chỉ cần thêm một quy tắc CSS để ẩn nhân vật khi phù hợp:
  @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

  • Có vẻ tác giả đã triển khai việc này. Giờ những người như tôi chỉ thấy một trang lorem ipsum vô nghĩa
    Tôi nghĩ demo có thể là ngoại lệ với loại bộ lọc này, đặc biệt nếu chỉ vào được qua một liên kết rõ ràng
    Cùng đoạn code làm nó biến mất lẽ ra cũng có thể thêm một thông báo “vì sao bị tắt”. Trong trường hợp của tôi là do Apple Menu > System Preferences > Accessibility > Display > Reduce motion; với OS khác thì xem https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
    Thiết lập này loại bỏ các animation nhỏ trên macOS, khiến máy có cảm giác phản hồi nhanh hơn. Nếu không có bình luận này, có lẽ tôi đã không biết trong nhiều năm rằng nó cũng ảnh hưởng tới website
  • Có lẽ đây chính xác là kiểu thứ khiến tôi bật “giảm chuyển động”, nhưng lần triển khai này khá vô hại nên cũng hơi tiếc
  • Ước gì tác giả trang web chưa thấy bình luận này. Tôi mất khá lâu mới hiểu vì sao không thấy nó trên bất kỳ trình duyệt nào
  • Nhận xét đúng. Giờ chắc đã sửa cho những người dùng bật thiết lập đó

• Sao chưa ai nói cái này nên được gọi là Stroll Bar nhỉ?

  • Tiếc là tên đó đã có người dùng, nên tôi đã mua scrollbuddy.com và sẽ chuẩn bị để mọi người sớm có thể triển khai

• Thay vì thanh cuộn nhàm chán, tôi nghĩ sẽ thú vị nếu có một người que hoạt hình đi lên đi xuống bên cạnh trang khi cuộn
  Đây là prototype đầu tiên
  Tiếp theo tôi định làm vận động viên trượt ván, người leo núi và sóc; còn nên làm thêm bạn đồng hành cuộn trang nào nữa?

  • Hai người đang bơm một toa xe goòng
    Hoặc những người chèo tay nắm thanh cuộn, tay nắm càng dài thì càng nhiều người chèo
  • Vài tuần trước tôi thấy một phiên bản sâu bướm như thế này -> https://x.com/trunarla/status/1893705260142657764
  • Ý tưởng rất tuyệt. Nếu được đề xuất, tôi muốn nhân vật rải vệt vụn bánh mì phía sau, rồi khi đi lên thì nhặt lại hoặc đá chúng ra khỏi màn hình
  • Hai ý tưởng đầu tiên của tôi để “đổi mới” cái này là một chiếc xe chạy xuống trang, hoặc đèn đếm ngược kiểu ‘full tree’ như cây đèn drag racing Christmas tree
  • Giọt mưa thì sao? Không ai từng cổ vũ cuộc đua giọt mưa khi còn nhỏ ngồi trong xe đường dài à?
    Một quả táo rơi xuống đầu Newton cũng hay
    Chỉ nghĩ thôi đã thấy vui rồi

• Tôi ngạc nhiên vì hình như chỉ có mình tôi định hỏi chuyện này: rốt cuộc vì sao cách triển khai lại bị giấu sau Google Form?
  Sửa: thật ra chi tiết triển khai có thể truy cập ngay trong DOM. Tôi đã tạo một gist trích xuất phần liên quan cho những ai không muốn đưa email:
  https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

  • Không hiểu nổi. Viết ra rồi không muốn chia sẻ thì còn hiểu được, nhưng đòi thu thập địa chỉ email để đổi lấy nó thì quá kỳ lạ
  • Ở trạng thái hiện tại, code không có giấy phép rõ ràng thì không dùng được. Đoạn code được đăng cũng không có license, nhưng có thể liên hệ tác giả để xin
    Dùng code được liên kết có thể là vi phạm bản quyền
  • Họ muốn nhận thù lao cho công sức của mình bằng sự chú ý thay vì tiền. Nghe khá hợp lý

• Tôi bỏ lỡ gì vậy? Cả Firefox lẫn Chrome tôi đều không thấy gì ngoài thanh cuộn
  Có phải vì màu thanh cuộn tùy chỉnh tôi đặt không?

  • Có phải bạn đã bật giảm chuyển động trong OS không? Nhân vật bị tắt để tôn trọng thiết lập đó
  • Có lẽ cũng có thể là do cái này: https://news.ycombinator.com/item?id=43237747
  • Trên Android Firefox và Android Chrome thì không thấy, còn trên Windows Chrome thì thấy
  • Tôi cũng vậy, chẳng có gì xảy ra

• Làm tôi nhớ cuối thập niên 90, khi người ta thêm các hiệu ứng hình ảnh vào website như tuyết rơi hay đuôi lửa chạy theo con trỏ chuột

  • Đúng vậy, DHTML Zone từng là nơi tiêu biểu để lấy các hiệu ứng hình ảnh mơ màng làm trình duyệt của người dùng tê liệt, nhằm khiến website trông cực kỳ ngầu
  • Giờ cũng có thể nghĩ tới iMessage trên iOS 18. Tôi vừa nâng cấp và thấy các emoji mới cùng hiệu ứng văn bản mang đậm cảm giác thập niên 2000

• Tôi thích các dự án như thế này vì chúng gợi nhớ Internet ngày xưa

  • Tôi cũng phản ứng như vậy, cảm giác ai đó chỉ làm một thứ vui và hay ho cho vui
  • Thêm nhiều marquee nữa!
  • Giống HN ngày xưa!

• Sao cái này lại nằm sau Google Form vậy...? Thậm chí còn không có ảnh chụp màn hình cho thấy nó trông ra sao trước khi thu thập địa chỉ email
  Thật lạ khi bài này lên được front page

  • Chỉ cần ở lại trên trang là được. Đừng bấm link “Get a scroll buddy for your website”
  • Trên trang được liên kết có hiển thị preview, nhưng việc chỉ nhận được cách dùng qua email vẫn kỳ lạ
  • Không phải vậy. Tôi mở trang thì nó hoạt động tốt
    Có lẽ bạn đã tắt CSS hoặc bỏ lỡ phần triển khai cạnh thanh cuộn. Xem các bình luận khác là được

• Vui và thông minh
  Nếu là developer, tôi sẽ làm một phiên bản trong đó khi cuộn lên, người que sẽ đi lùi và moonwalk

  • Có thể là câu hỏi hơi ngớ ngẩn, nhưng tôi tò mò nếu không phải developer thì bạn biết tới HN bằng cách nào