Rellax.js - คุณสมบัติ Parallax ฟรีโดยใช้ Vanilla JavaScript
การเลื่อน Parallax ดูเหลือเชื่อเมื่อทำถูก มันไม่ใช่คุณสมบัติที่คุณต้องการในทุก ๆ เว็บไซต์ แต่สำหรับเว็บไซต์ที่สร้างสรรค์และหน้าที่เชื่อมโยงไปถึงส่วนประกอบของพารัลแลกซ์ ดึงดูดความสนใจอย่างรวดเร็ว.
มีไลบรารี JavaScript ฟรีมากมายสำหรับ เอฟเฟกต์การเลื่อนแบบเคลื่อนไหว แต่หลายคนป่องหรือซับซ้อนเกินไปสำหรับบางคน.
นั่นเป็นเหตุผลที่ฉันแนะนำ Rellax.js สำหรับความต้องการรัลแลกซ์ของคุณ มันเป็นปลั๊กอินโอเพนซอร์ซฟรีที่สร้างจาก JavaScript วานิลลา ไม่มีการพึ่งพาใด ๆ.
โดยปกติแล้วมัน ต้องการเพียงการเรียกใช้ฟังก์ชันอย่างง่าย เพื่อกำหนดคลาสพารัลแลกซ์ให้กับองค์ประกอบของหน้า จากนั้นในขณะที่คุณเลื่อนองค์ประกอบเหล่านี้ คงที่ และย้ายไปตามมุมมองของผู้ใช้.
คุณสามารถปรับแต่งองค์ประกอบเหล่านี้เพื่อให้ปรากฏใกล้ไกลออกไปหรืออยู่ด้านหลังองค์ประกอบของหน้า สิ่งนี้สร้าง ภาพลวงตาของความลึก บนหน้าเว็บและทำงานได้ผ่านไลบรารี JavaScript ที่เรียบง่าย.
ซอร์สโค้ด Rellax ทั้งหมดนั้นฟรีใน GitHub หากคุณต้องการดาวน์โหลดสำเนา.
การตั้งค่าทั้งหมด ใช้ฟังก์ชั่น JS เดียว กำหนดเป้าหมายไปที่ .rellax ชั้นชอบมาก:
var rellax = new Rellax ('. rellax'); หมายเหตุคุณสามารถใช้สวยมาก ชั้นเรียนใด ๆ ที่คุณต้องการ, แต่ตัวอย่างการสาธิตใช้ .rellax เพื่อความเรียบง่าย.
จากที่นี่คุณแค่ ห่อองค์ประกอบพารัลแลกซ์ของคุณ ภายในกองกับ .rellax ชั้นและ ตั้งค่าคุณลักษณะความเร็ว. งานนี้ผ่าน -rellax ความเร็วข้อมูล แอตทริบิวต์ที่กำหนดเองซึ่งยอมรับค่าจาก -10 ถึง +10.
นี่คือ ตัวอย่างข้อมูล จาก HTML ในหน้าตัวอย่าง:
ฉันช้าและนุ่มนวลเป็นพิเศษ
นอกจากนี้คุณยังสามารถ องค์ประกอบกลาง บนหน้าและ ปรับแต่งตำแหน่งองค์ประกอบ ผ่าน CSS.
Rellax ไม่ได้บอกวิธีจัดโครงสร้างหน้าหรือวิธีกำหนดองค์ประกอบ CSS บนหน้าของคุณ ทั้งหมดมันคือ สร้างเอฟเฟกต์การเลื่อนพารัลแลกซ์ตามธรรมชาติ ด้วยจาวาสคริปต์ที่บริสุทธิ์ วิธีที่คุณใช้สิ่งนี้ขึ้นอยู่กับคุณทั้งหมด.
หากต้องการดู การสาธิตสด, ดูที่เว็บไซต์หลักหรือเรียกดู repo GitHub ซึ่งรวมถึงเอกสารประกอบบางส่วนพร้อมกับลิงก์ไปยังเว็บไซต์ที่ใช้งานจริงโดยใช้ Rellax.js.
และที่ดีที่สุดคือทีมพร้อมที่จะรับคำขอดึงอย่างต่อเนื่องดังนั้นหากคุณสังเกตเห็นปัญหาใด ๆ หรือมีข้อเสนอแนะสำหรับคุณสมบัติเพียงแค่ส่งข้อความด่วนไปยังทีม.
