สร้างเอฟเฟกต์การเลื่อนหน้าของคุณเองด้วย Roll.js
คุณสามารถค้นหาไลบรารีการเลื่อนได้หลายสิบแห่งทั่วเว็บ ส่วนใหญ่จะเขียนด้วย JavaScript และมีเอฟเฟกต์ของตัวเองคุณสามารถใช้รูปแบบหน้าเดียวภาพเคลื่อนไหวแบบเลื่อนและอื่น ๆ อีกมากมาย.
แต่สิ่งที่เกี่ยวกับ การเขียนเอฟเฟกต์การเลื่อนของคุณเอง? หรือถ้าคุณต้องการวิธีการง่ายๆในการติดตามว่าผู้ใช้เลื่อนหน้าเว็บไปไกลแค่ไหน?
Roll.js เป็นห้องสมุดที่คุณกำลังมองหา นี้ สคริปต์โอเพนซอร์สนั้นเล็กมากและใช้งานง่ายสุด ๆ. คุณสามารถใช้งาน JavaScript ได้สองสามบรรทัด และที่ดีที่สุดก็ไม่ได้บังคับให้คุณทำอะไรที่เฉพาะเจาะจง ให้เครื่องมือแก่คุณ เพื่อสร้างคุณสมบัติการเลื่อนแบบกำหนดเองของคุณเอง.
เป้าหมายของห้องสมุดนี้คือการช่วยให้ผู้พัฒนาโครงสร้างเอฟเฟกต์การเลื่อนโดยไม่ต้องใช้ความพยายามมากนัก.
หากคุณดูที่ repo หลักของ GitHub คุณจะพบคู่มือการตั้งค่าทั้งหมดพร้อมตัวอย่างบางส่วน คุณสามารถ เรียกใช้ฟังก์ชั่นเพื่อเรียกดูว่าผู้ใช้เลื่อนเท่าไร, หรือแตกต่างกันไป “บานหน้าต่าง” บนหน้า.
สิ่งเหล่านี้ทำงานได้ดีที่สุดในเค้าโครงหน้าเดียว แต่คุณสามารถใช้ Roll.js ได้มาก.
ด้วยการเรียกใช้ฟังก์ชันเดียวคุณสามารถดึงข้อมูลด้วยการเลื่อนแต่ละครั้งซึ่งรวมถึง:
- ขั้นตอนหน้าทั้งหมด (ถ้ามี).
- หน้าเลื่อนลงทั้งหมด%.
- ตำแหน่งปัจจุบันบนหน้าเว็บในหน่วยพิกเซล.
- ความสูงวิวพอร์ตรวมตามขนาดของอุปกรณ์.
สิ่งนี้ยังทำงานกับลิงค์ข้ามที่นำผู้ใช้ลง (หรือขึ้น) ไปยังบางส่วนของหน้า.
แต่คุณสามารถค้นหาคุณสมบัติเหล่านี้ได้มากมายในห้องสมุดอื่นเช่นกัน อะไรทำให้ Roll.js มีความพิเศษมาก?
ส่วนหนึ่งเป็นไวยากรณ์ แต่ผู้ขายรายใหญ่ที่นี่คือขนาดห้องสมุดทั้งหมดของ 8KB เมื่อลดขนาด มันเล็กมากสำหรับห้องสมุดเลื่อนที่มีรายละเอียด!
คุณสามารถดูวิธีการทำงานในหน้าสาธิตหลักและคุณสามารถทำได้ ดาวน์โหลดซอร์สโค้ดของ Roll.js เพื่อขุดตัวอย่างเหล่านั้นด้วยตัวเอง.
ทุกอย่างจากการสาธิตสดและไฟล์ไลบรารีแบบดิบสามารถดึงได้จาก GitHub และพวกเขาก็ใช้งานได้ง่ายสุด ๆ.
แต่ถ้าคุณมีคำถามข้อเสนอแนะหรืออยากแบ่งปันคำขอบคุณสำหรับห้องสมุดที่ยอดเยี่ยมคุณสามารถส่งข้อความถึงผู้สร้าง @williamngan.
