โฮมเพจ » Toolkit » สร้างเอฟเฟกต์การเลื่อนหน้าของคุณเองด้วย Roll.js

    สร้างเอฟเฟกต์การเลื่อนหน้าของคุณเองด้วย Roll.js

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

    แต่สิ่งที่เกี่ยวกับ การเขียนเอฟเฟกต์การเลื่อนของคุณเอง? หรือถ้าคุณต้องการวิธีการง่ายๆในการติดตามว่าผู้ใช้เลื่อนหน้าเว็บไปไกลแค่ไหน?

    Roll.js เป็นห้องสมุดที่คุณกำลังมองหา นี้ สคริปต์โอเพนซอร์สนั้นเล็กมากและใช้งานง่ายสุด ๆ. คุณสามารถใช้งาน JavaScript ได้สองสามบรรทัด และที่ดีที่สุดก็ไม่ได้บังคับให้คุณทำอะไรที่เฉพาะเจาะจง ให้เครื่องมือแก่คุณ เพื่อสร้างคุณสมบัติการเลื่อนแบบกำหนดเองของคุณเอง.

    เป้าหมายของห้องสมุดนี้คือการช่วยให้ผู้พัฒนาโครงสร้างเอฟเฟกต์การเลื่อนโดยไม่ต้องใช้ความพยายามมากนัก.

    หากคุณดูที่ repo หลักของ GitHub คุณจะพบคู่มือการตั้งค่าทั้งหมดพร้อมตัวอย่างบางส่วน คุณสามารถ เรียกใช้ฟังก์ชั่นเพื่อเรียกดูว่าผู้ใช้เลื่อนเท่าไร, หรือแตกต่างกันไป “บานหน้าต่าง” บนหน้า.

    สิ่งเหล่านี้ทำงานได้ดีที่สุดในเค้าโครงหน้าเดียว แต่คุณสามารถใช้ Roll.js ได้มาก.

    ด้วยการเรียกใช้ฟังก์ชันเดียวคุณสามารถดึงข้อมูลด้วยการเลื่อนแต่ละครั้งซึ่งรวมถึง:

    • ขั้นตอนหน้าทั้งหมด (ถ้ามี).
    • หน้าเลื่อนลงทั้งหมด%.
    • ตำแหน่งปัจจุบันบนหน้าเว็บในหน่วยพิกเซล.
    • ความสูงวิวพอร์ตรวมตามขนาดของอุปกรณ์.

    สิ่งนี้ยังทำงานกับลิงค์ข้ามที่นำผู้ใช้ลง (หรือขึ้น) ไปยังบางส่วนของหน้า.

    แต่คุณสามารถค้นหาคุณสมบัติเหล่านี้ได้มากมายในห้องสมุดอื่นเช่นกัน อะไรทำให้ Roll.js มีความพิเศษมาก?

    ส่วนหนึ่งเป็นไวยากรณ์ แต่ผู้ขายรายใหญ่ที่นี่คือขนาดห้องสมุดทั้งหมดของ 8KB เมื่อลดขนาด มันเล็กมากสำหรับห้องสมุดเลื่อนที่มีรายละเอียด!

    คุณสามารถดูวิธีการทำงานในหน้าสาธิตหลักและคุณสามารถทำได้ ดาวน์โหลดซอร์สโค้ดของ Roll.js เพื่อขุดตัวอย่างเหล่านั้นด้วยตัวเอง.

    ทุกอย่างจากการสาธิตสดและไฟล์ไลบรารีแบบดิบสามารถดึงได้จาก GitHub และพวกเขาก็ใช้งานได้ง่ายสุด ๆ.

    แต่ถ้าคุณมีคำถามข้อเสนอแนะหรืออยากแบ่งปันคำขอบคุณสำหรับห้องสมุดที่ยอดเยี่ยมคุณสามารถส่งข้อความถึงผู้สร้าง @williamngan.