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

 (focusfurnace.com)
1 điểm bởi GN⁺ 2025-03-04 | 1 bình luận | Chia sẻ qua WhatsApp

  • Giới thiệu về Scroll Buddy

    • Đây là một dự án thêm nhân vật người que hoạt hình để làm thanh cuộn trở nên thú vị hơn
    • Khi cuộn, bạn có thể thấy nhân vật người que di chuyển lên xuống bên cạnh trang
    • Trong tương lai, dự kiến sẽ có nhiều phiên bản khác nhau như người trượt ván, người leo núi và sóc

  • Lưu ý

    • Ví dụ hoạt hình ở cạnh trang có thể gây vấn đề cho một số độc giả
    • Những độc giả bị rối loạn tiền đình nên bật tính năng giảm chuyển động trên thiết bị trước khi xem hoạt hình
    • Nếu cài đặt giảm chuyển động được bật, Scroll Buddy sẽ bị ẩn trên hầu hết các trình duyệt

  • Thông tin khác

    • Dự án này được tạo bằng JavaScript đơn giản
    • Tác giả đang nhận các ý tưởng để làm thanh cuộn thú vị hơn nữa

  • Nội dung khác

    • Phần văn bản còn lại chỉ là văn bản giả để phục vụ việc cuộn, không liên quan đến nội dung thực tế

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-03-04
Ý kiến trên Hacker News
  • Thú vị đấy. Tôi từng có một ý tưởng chưa viết code. Về cơ bản là một con hamster đeo dù rơi từ từ xuống cuối trang
    • Khi cuộn nhanh, chiếc dù sẽ bung ra và nó lại hạ cánh ở cuối viewport
    • Khi rê chuột vào, nó sẽ cầm một tấm biển "Top"; nếu bấm vào thì sẽ bay lên bằng jetpack, và khi màn hình chạm đến đầu trang thì lại bung dù ra để hạ cánh nhẹ nhàng xuống cuối màn hình
  • Tò mò không hiểu sao chưa ai gọi nó là "Stroll Bar"
  • Nên tắt tính năng kiểu này khi người dùng bật thiết lập prefers-reduced-motion
    • Cần thêm một quy tắc CSS
    • @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }
  • Sẽ vui hơn nếu thay thanh cuộn nhàm chán bằng một hình người que hoạt hình đi lên đi xuống bên cạnh trang
    • Tôi đã làm nguyên mẫu đầu tiên
    • Tiếp theo định làm người trượt ván, người leo núi và sóc
    • Không biết nên làm thêm những kiểu bạn đồng hành cuộn trang nào nữa
  • Tò mò vì sao phần triển khai lại bị giấu sau Google Form
    • Chi tiết triển khai có thể truy cập dễ dàng từ DOM
    • Có người đã chia sẻ một gist để trích xuất các chi tiết liên quan mà không cần cung cấp email
  • Cũng tò mò vì sao lại đặt sau Google Form. Trước khi thu thập địa chỉ email thì còn chẳng có lấy một ảnh chụp màn hình cho thấy nó trông ra sao. Một bài đăng khá kỳ lạ lại lên trang chính
  • Gợi nhớ đến thời cuối thập niên 90 khi mọi người thêm hiệu ứng tuyết hoặc vệt lửa chạy theo con trỏ chuột vào website
  • Không rõ tôi đang bỏ lỡ điều gì. Trên Firefox và Chrome tôi không thấy gì ngoài chính thanh cuộn. Không biết có liên quan đến màu thanh cuộn tùy chỉnh của người dùng hay không
  • Những dự án kiểu này gợi lại cảm giác của internet ngày xưa. Tôi thích
  • Nó làm nổi bật việc thanh cuộn hiện có vô dụng và khó dùng đến mức nào
    • Tôi thích khả năng dễ dàng nhìn ra mình đang ở đâu trên trang. Cũng có chút hài hước. Tôi thích