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

 (focusfurnace.com)
1 คะแนน โดย GN⁺ 2025-03-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

  • แนะนำ Scroll Buddy

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

  • ข้อควรระวัง

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

  • ข้อมูลอื่น ๆ

    • โปรเจกต์นี้สร้างขึ้นด้วย JavaScript แบบเรียบง่าย
    • ผู้พัฒนาเปิดรับไอเดียเพื่อทำให้สกอลล์บาร์น่าสนใจยิ่งขึ้น

  • เนื้อหาอื่น ๆ

    • ข้อความที่เหลือเป็นข้อความตัวอย่างสำหรับการสกอลล์ และไม่เกี่ยวข้องกับเนื้อหาจริง

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

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

 
GN⁺ 2025-03-04
ความคิดเห็นบน Hacker News
  • สนุกดี เคยมีไอเดียหนึ่งที่ไม่ได้เขียนโค้ดไว้ โดยพื้นฐานคือหนูแฮมสเตอร์ถือร่มชูชีพค่อย ๆ ตกลงไปด้านล่างของหน้า
    • ถ้าเลื่อนเร็ว ร่มชูชีพจะกางออกแล้วกลับมาลงจอดที่ด้านล่างของ viewport
    • เมื่อเอาเมาส์ไปชี้ มันจะชูป้าย "Top" และถ้าคลิกก็จะบินขึ้นด้วยเจ็ตแพ็ก และเมื่อหน้าจอไปถึงด้านบนสุดก็จะกางร่มอีกครั้งแล้วลงจอดนุ่ม ๆ ที่ด้านล่างของหน้าจอ
  • สงสัยว่าทำไมไม่มีใครเรียกสิ่งนี้ว่า 'Stroll Bar'
  • ควรปิดฟีเจอร์แบบนี้เมื่อผู้ใช้ตั้งค่า prefers-reduced-motion
    • ต้องมีกฎ CSS เพิ่มเติม
    • @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }
  • แทนที่จะเป็นสกรอลบาร์น่าเบื่อ คิดว่าน่าจะสนุกถ้ามีสติกฟิกเกอร์แบบแอนิเมชันเดินขึ้นลงอยู่ข้างหน้ากระดาษ
    • ทำต้นแบบแรกไว้แล้ว
    • ต่อไปมีแผนจะทำสเก็ตบอร์ดเดอร์ นักปีนผา และกระรอก
    • สงสัยว่าควรทำเพื่อนสกรอลแบบอื่นอะไรอีกดี
  • สงสัยว่าทำไมถึงซ่อนการติดตั้งใช้งานไว้หลัง Google Form
    • รายละเอียดการติดตั้งเข้าถึงได้ง่ายจาก DOM
    • แชร์ gist ที่สามารถดึงรายละเอียดที่เกี่ยวข้องได้โดยไม่ต้องให้อีเมล
  • สงสัยว่าทำไมถึงอยู่หลัง Google Form ไม่มีแม้แต่ภาพหน้าจอให้ดูว่ามันหน้าตาเป็นอย่างไรก่อนจะเก็บอีเมล เป็นโพสต์แปลก ๆ ที่ขึ้นหน้าแรก
  • ทำให้นึกถึงยุคปลายทศวรรษ 90 ที่ผู้คนชอบใส่เอฟเฟกต์ดวงตาหรือเปลวไฟที่วิ่งตามเมาส์ลงในเว็บไซต์
  • ไม่แน่ใจว่าตัวเองพลาดอะไรไป เพราะใน Firefox และ Chrome มองไม่เห็นอะไรนอกจากสกรอลบาร์เอง สงสัยว่าสีสกรอลบาร์แบบกำหนดเองเกี่ยวข้องหรือไม่
  • โปรเจ็กต์แบบนี้ทำให้นึกถึงอินเทอร์เน็ตยุคเก่า ชอบ
  • มันย้ำให้เห็นว่าสกรอลบาร์แบบเดิมนั้นไร้ประโยชน์และใช้งานยากแค่ไหน
    • ชอบความสามารถที่ทำให้เห็นได้ง่ายว่าก่อนหน้านี้อยู่ตรงไหนของหน้า และก็มีอารมณ์ขันด้วย ชอบ