พัฒนา Scroll Bar Buddy ที่เลื่อนตามหน้าขณะสกอลล์

 (focusfurnace.com)
1 คะแนน โดย GN⁺ 2025-03-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Scroll Buddy คือโปรโตไทป์แรกที่เปลี่ยนสกอลล์บาร์แบบเดิมให้เป็น ตัวละครแอนิเมชันที่เดินอยู่ข้างหน้าเว็บ ทำให้การสกอลล์กลายเป็นอินเทอร์แอ็กชันเล็ก ๆ
  • การทำงานปัจจุบันเป็นตัวละคร คนไม้ขีด ที่เคลื่อนขึ้นลงตามตำแหน่งการสกอลล์ เป็นการทดลองเปลี่ยนสกอลล์บาร์ที่น่าเบื่อให้กลายเป็นองค์ประกอบตกแต่งที่สนุกขึ้น
  • ตัวเลือกถัดไปที่เสนอไว้มี skateboarder, rock climber และ squirrel และยังเปิดรับไอเดียตัวละครอื่น ๆ
  • มี แบบฟอร์มสมัคร สำหรับผู้ที่ต้องการนำไปใช้กับเว็บไซต์
  • ตัวอย่างที่ฝังไว้ด้านข้างหน้าเพจมีการเคลื่อนไหว จึงอาจเป็นภาระต่อผู้อ่านที่มีอาการเมาเหตุจากระบบการทรงตัว และควรถูกซ่อนในเบราว์เซอร์ส่วนใหญ่เมื่อเปิดการตั้งค่า reduce motion

โปรโตไทป์ที่เปลี่ยนสกอลล์บาร์ให้เป็นตัวละคร

  • Scroll Buddy คือการทดลองเปลี่ยนสกอลล์บาร์จากองค์ประกอบ UI ธรรมดา ให้กลายเป็นตัวละครแอนิเมชันที่เคลื่อนไปตามข้างหน้าเว็บเมื่อมีการสกอลล์
  • โปรโตไทป์แรกใช้ตัวละคร คนไม้ขีด ที่เดินขึ้นลงเมื่อผู้ใช้สกอลล์
  • เวอร์ชันถัดไปที่เป็นไปได้มี Scroll Buddy ในรูปแบบ skateboarder, rock climber และ squirrel

สมัครเพื่อนำไปใช้กับเว็บไซต์

  • มีลิงก์สมัครสำหรับผู้ใช้ที่ต้องการใส่ Scroll Buddy ลงในเว็บไซต์
  • Get a scroll buddy for your website

ข้อควรระวังด้านการเข้าถึงเกี่ยวกับการเคลื่อนไหว

  • ตัวอย่างแบบฝังที่ด้านข้างหน้าเพจมี แอนิเมชันและการเคลื่อนไหว
  • แนะนำให้ผู้อ่านที่มีอาการเมาจากระบบการทรงตัวเปิดฟีเจอร์ reduce motion ของอุปกรณ์ก่อนดูแอนิเมชัน
  • หากเปิดการตั้งค่า reduce motion อยู่ Scroll Buddy ควรถูกซ่อนในเบราว์เซอร์ส่วนใหญ่

เบาะแสเกี่ยวกับการพัฒนาและโครงสร้างหน้าเพจ

  • ในหน้าเพจมีหัวข้อส่วนที่ระบุว่าสร้างด้วย simple javascript
  • หลังจากนั้น เนื้อหาส่วนใหญ่เป็นข้อความตัวอย่าง lorem ipsum สำหรับสร้างการสกอลล์

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-03-04
ความคิดเห็นใน Hacker News

  • เจ๋งดี! ยังไม่ได้ทำเป็นโค้ด แต่เคยมีไอเดีย หนูแฮมสเตอร์ติดร่มชูชีพ
    มันจะค่อย ๆ ร่วงลงไปด้านล่างของหน้า พอเลื่อนเร็ว ๆ ก็จะกางร่มชูชีพแล้วลงจอดที่ขอบล่างของ viewport อีกครั้ง พอเอาเมาส์ไปชี้ก็ชูป้าย “Top” และเมื่อคลิกก็จะบินขึ้นไปด้านบนด้วยเจ็ตแพ็ก จากนั้นพอหน้าจอแตะถึงด้านบนสุดก็จะกางร่มชูชีพอีกครั้งแล้วค่อย ๆ ลอยลงมาอย่างนุ่มนวล

    • ตอนนี้อยากได้สิ่งนี้ขึ้นมาแล้ว รู้สึกว่าหนูแฮมสเตอร์น่าจะหน้าตาคล้าย gopher ของภาษา Go แน่ ๆ ถึงจะไม่ใช่สีฟ้าก็ตาม
    • รอลิงก์ repo อยู่ ถ้าหนูแฮมสเตอร์เลื่อนเร็วเกินไปจนกางร่มชูชีพใหม่ไม่ทัน ผมจะเพิ่ม fork ที่ทำให้ผู้ใช้ “แพ้”
      อาจช่วยยับยั้งการเลื่อนได้ไหมนะ?
    • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
      ข้อจำกัดความรับผิดชอบ: ไม่ได้เขียนเองแม้แต่บรรทัดเดียว ใช้ Claude 3.7 ผ่าน Kagi assistant แล้วแก้ประมาณ 10 รอบในบทสนทนาเดียว สิ่งที่ทำเองมีแค่แปะอีโมจิลงในพรอมป์
      ไม่เคยเขียน HTML กับ JS ที่มีความหมายจริงจังมาก่อน
      แก้ไข: ตลกดีที่เอาโค้ดที่ AI สร้างไปแปะในที่ที่มีเรื่อง AI เต็มไปหมดแล้วสิ่งแรกที่ได้รับคือโดน downvote ดูเหมือนคนจะชอบฝ่ายที่เกลียด AI มากกว่าหนูแฮมสเตอร์
    • ตอนเลื่อนขึ้นด้านบน อยากให้มี หนูแฮมสเตอร์เจ็ตแพ็ก/จรวด โผล่มา

  • ของแบบนี้น่าจะควรปิดใช้งานถ้าผู้ใช้ตั้งค่า prefers-reduced-motion ไว้
    https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
    ถ้าจะซ่อนตัวละครเมื่อเหมาะสม ก็เพิ่มกฎ CSS แค่บรรทัดเดียวพอ:
    @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

    • ดูเหมือนผู้เขียนจะทำตามแล้ว ตอนนี้คนอย่างผมเลยเห็นแค่หน้า lorem ipsum ที่ไม่มีความหมาย
      ผมคิดว่าเดโมควรเป็นข้อยกเว้นจากตัวกรองแบบนี้ได้ โดยเฉพาะถ้าเข้าถึงได้ผ่านลิงก์ที่ชัดเจนเท่านั้น
      โค้ดเดียวกับที่ทำให้มันหายไปก็น่าจะเพิ่มข้อความบอกว่า “ทำไมถึงถูกปิดใช้งาน” ได้ด้วย ในกรณีของผมเป็นเพราะ Apple Menu > System Preferences > Accessibility > Display > Reduce motion ส่วน OS อื่นดูได้ที่ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
      การตั้งค่านี้ทำให้แอนิเมชันเล็ก ๆ ใน macOS หายไป จึงรู้สึกว่าระบบตอบสนองไวขึ้น ถ้าไม่ใช่เพราะคอมเมนต์นี้ ผมคงไม่รู้ไปอีกหลายปีว่ามันมีผลกับเว็บไซต์ด้วย
    • ก็น่าจะเป็นเหตุผลตรง ๆ ที่ผมเปิด “ลดการเคลื่อนไหว” ไว้นั่นแหละ แต่การทำครั้งนี้ค่อนข้างไม่เป็นพิษเป็นภัย เลยเสียดายนิดหน่อย
    • แอบหวังว่าคนทำเว็บจะไม่เห็นคอมเมนต์นี้ ผมใช้เวลาตั้งนานกว่าจะเข้าใจว่าทำไมไม่เห็นในเบราว์เซอร์ไหนเลย
    • ชี้ได้ถูกจุด ตอนนี้น่าจะแก้ให้ผู้ใช้ที่เปิดการตั้งค่านี้แล้ว

  • ทำไมไม่มีใครบอกว่าควรเรียกสิ่งนี้ว่า Stroll Bar เลยนะ?

    • น่าเสียดายที่ชื่อนั้นมีคนใช้แล้ว เลยซื้อ scrollbuddy.com มาแทน และจะเตรียมให้คนอื่นนำไปใช้ได้เร็ว ๆ นี้

  • แทนที่จะเป็น scrollbar น่าเบื่อ ๆ ผมคิดว่าคงสนุกดีถ้ามี ตัวก้างปลาแบบแอนิเมชัน เดินขึ้นลงตามข้างหน้าเว็บตอนเลื่อน
    นี่คือโปรโตไทป์แรก
    ต่อไปตั้งใจจะทำสเกตบอร์ดเดอร์ นักปีนผา และกระรอก ควรทำเพื่อนเลื่อนหน้าแบบไหนอีกดี?

    • คนสองคนกำลังปั๊ม รถรางมือโยก
      หรือเป็นคนพายด้ามจับของ scrollbar ยิ่งด้ามจับยาวก็ยิ่งมีคนพายมากขึ้น
    • เมื่อไม่กี่สัปดาห์ก่อนเห็นเวอร์ชัน หนอนผีเสื้อ แบบนี้ -> https://x.com/trunarla/status/1893705260142657764
    • ไอเดียเจ๋งมาก ขอเสนอว่าให้ตัวละครโปรย รอยเศษขนมปัง ไว้ข้างหลัง แล้วตอนขึ้นก็เก็บกลับเข้าไปหรือเตะออกนอกจอ
    • สองไอเดียแรกที่จะเอามา ‘นวัตกรรม’ ต่อคือ รถที่วิ่งลงไปตามหน้าเว็บ หรือไฟนับถอยหลังแบบ ‘full tree’ เหมือน ต้นคริสต์มาสของการแข่ง drag racing
    • หยดฝนเป็นไง? ไม่มีใครเคยเชียร์ แข่งหยดฝน ตอนนั่งรถทางไกลสมัยเด็ก ๆ เหรอ?
      แอปเปิลตกใส่หัวนิวตันก็น่าจะดี
      แค่คิดก็สนุกแล้ว

  • แปลกใจที่ดูเหมือนมีแค่ผมที่จะถามเรื่องนี้ แต่ทำไมถึง ซ่อนวิธีทำไว้หลัง Google Form กันแน่?
    แก้ไข: จริง ๆ แล้วรายละเอียดการทำเข้าถึงได้จาก DOM โดยตรง ผมเลยทำ gist ที่ดึงส่วนที่เกี่ยวข้องออกมาให้คนที่ไม่อยากให้อีเมล:
    https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

    • ไม่เข้าใจเลย ถ้าเขียนบทความแล้วไม่อยากแชร์ก็พอเข้าใจได้ แต่การจะเก็บ อีเมล เป็นค่าตอบแทนสำหรับสิ่งนั้นนี่แปลกมาก
    • ในสภาพปัจจุบัน โค้ดที่ไม่มีไลเซนส์ระบุชัดเจนใช้งานไม่ได้ โค้ดที่โพสต์มาก็ไม่มีไลเซนส์เหมือนกัน แต่ถ้าติดต่อผู้เขียนอาจจะได้รับก็ได้
      การใช้โค้ดที่ลิงก์ไว้อาจเป็น การละเมิดลิขสิทธิ์
    • เขาต้องการรับค่าตอบแทนสำหรับงานเป็น ความสนใจ ไม่ใช่เงิน ก็ดูสมเหตุสมผลอยู่นะ

  • ผมพลาดอะไรไปหรือเปล่า? ทั้ง Firefox และ Chrome ไม่เห็นอะไรเลยนอกจาก scrollbar
    เป็นเพราะ สี scrollbar แบบกำหนดเอง ที่ผมตั้งไว้หรือเปล่า?

    • ได้เปิด ลดการเคลื่อนไหว ไว้ใน OS หรือเปล่า? ตัวละครถูกปิดใช้งานเพราะเคารพการตั้งค่านั้น
    • บางทีอาจเป็นเพราะอันนี้: https://news.ycombinator.com/item?id=43237747
    • บน Android Firefox กับ Android Chrome ไม่เห็น แต่บน Windows Chrome เห็น
    • ผมก็เหมือนกัน ไม่มีอะไรเกิดขึ้นเลย

  • ทำให้นึกถึงช่วงปลายยุค 90 ที่คนใส่ เอฟเฟกต์ภาพ อย่างหิมะตกบนเว็บไซต์ หรือหางประกายไฟที่ตามเมาส์

    • ใช่เลย DHTML Zone เป็นแหล่งประจำสำหรับหยิบเอฟเฟกต์ภาพชวนฝันที่ทำให้เบราว์เซอร์ผู้ใช้เป็นอัมพาตมาใช้ เพื่อให้เว็บไซต์ดูเท่สุด ๆ
    • ตอนนี้ก็นึกถึง iMessage ใน iOS 18 ได้เหมือนกัน เพิ่งอัปเกรด แล้วอีโมจิกับเอฟเฟกต์ข้อความใหม่ ๆ ให้ความรู้สึกแบบ ยุค 2000 มาก

  • โปรเจกต์แบบนี้ดีตรงที่ทำให้นึกถึง อินเทอร์เน็ตยุคเก่า

    • ผมก็รู้สึกแบบเดียวกัน เหมือนมีคนทำอะไรสนุก ๆ และเจ๋ง ๆ ขึ้นมาเฉย ๆ
    • ขอ marquee เพิ่มอีก!
    • เหมือน HN ยุคเก่าเลย!

  • ทำไมสิ่งนี้ถึงอยู่หลัง Google Form...? ก่อนจะเก็บอีเมล ยังไม่มีแม้แต่สกรีนช็อตให้ดูว่าหน้าตาเป็นยังไง
    แปลกที่โพสต์แบบนี้ขึ้นหน้าแรกได้

    • แค่อยู่ในหน้านั้นก็พอ ไม่ต้องกดลิงก์ “Get a scroll buddy for your website”
    • หน้าเว็บที่ลิงก์มามีพรีวิวให้ดู แต่ก็ยังแปลกอยู่ดีที่วิธีใช้งานต้องรับทางอีเมลเท่านั้น
    • ไม่ใช่นะ ผมเปิดหน้าแล้วมันก็ทำงานดี
      น่าจะปิด CSS ไว้ หรือมองข้ามการทำงานข้าง scrollbar ไป ลองดูคอมเมนต์อื่น ๆ ก็ได้

  • สนุกและฉลาดดี
    ถ้าผมเป็นนักพัฒนา ผมจะทำเวอร์ชันที่ตอนเลื่อนขึ้น ตัวก้างปลาเดินถอยหลังแบบ moonwalk

    • อาจเป็นคำถามทึ่ม ๆ หน่อย แต่ถ้าไม่ใช่นักพัฒนาแล้วเข้ามา HN ได้ยังไง สงสัยจริง ๆ