สร้างอนิเมชั่นเคลื่อนไหวที่สวยงามด้วย Javascript Library นี้

มีไลบรารีแอนิเมชันฟรีมากมายที่มีเอฟเฟกต์และความเชี่ยวชาญที่แตกต่างกัน แต่ไลบรารี Particles.js ใหม่มีทิศทางใหม่โดยสิ้นเชิงโดยการสร้าง อนุภาคเคลื่อนไหว ที่ ย้ายในเวลาจริง ทั่วหน้า.

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

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

เนื่องจากเป็นไลบรารีที่มีรายละเอียดจึงจำเป็นต้องมี มีความเข้าใจ JavaScript เป็นอย่างดี เพื่อให้มันทำงาน นั่นเป็นเหตุผลที่การสาธิตสดนี้มีค่ามากเพราะช่วยให้ทุกคนเล่นกับการตั้งค่าเหล่านี้เพื่อดูว่าอะไรเป็นไปได้ใน JavaScript.

และถ้าคุณโอเคกับการส่งออกกราฟิกเหล่านี้คุณสามารถ บันทึกภาพโดยตรง จากหน้าตัวอย่างแอปพลิเคชันเว็บ คุณสามารถ ส่งออก PNG ดิบ หรือแม้กระทั่ง บันทึกการตั้งค่าแบบกำหนดเองทั้งหมดของคุณ ลงในไฟล์ JSON ซึ่งนำเข้าโดยตรงไปยังสคริปต์ Particles.js.

โดยค่าเริ่มต้นคุณสามารถเลือกจาก ธีมขนาดเล็กจำนวนหนึ่ง ด้วยรูปแบบอนุภาคที่แตกต่างกัน:

• ดาวนาซ่า
• ฟองฟอด
• หิมะ
• เนียนแมวดาว
• รูปทรงเรขาคณิตเริ่มต้น

ด้วยค่าเริ่มต้นเหล่านี้คุณยังคงสามารถ แก้ไขการตั้งค่าหลักทั้งหมด เพื่อปรับแต่งสีตำแหน่งความเร็วและทุกอย่างอื่น.

ส่วนที่ดีที่สุดของห้องสมุดทั้งหมดนี้คือ คุณสมบัติการปรับแต่งสด ขวาบนหน้าหลัก หากคุณต้องการทราบรายละเอียดที่จำเป็นต้องเข้าใจ JavaScript และการเข้ารหัสส่วนหน้า.

แต่แม้กระทั่งผู้เริ่มต้นก็สามารถทำงานผ่านอินเทอร์เฟซเลือกการตั้งค่าที่ต้องการและส่งออกทุกอย่างเป็นไฟล์ JSON.

ห้องสมุดที่ยอดเยี่ยมสำหรับทุกคนที่กำลังมองหา สร้างอนุภาคแบบไดนามิกบนเว็บ. หากต้องการเรียนรู้เพิ่มเติมเยี่ยมชม repo GitHub และคุณสามารถแบ่งปันความคิดของคุณกับผู้สร้าง Vincent Garreauon บน Twitter @VincentGarreau.