เลื่อนและทำให้หน้าของคุณเคลื่อนไหวอย่างง่ายดายด้วย Force.js

ภาพเคลื่อนไหวบนเว็บนั้นง่ายกว่าที่เคยมีมาด้วย ภาพเคลื่อนไหว CSS3 บริสุทธิ์ กลายเป็นบรรทัดฐาน แต่, JavaScript ยังคงมีคุณค่าอย่างไม่น่าเชื่อ และเป็นหนึ่งในไม่กี่ภาษาที่เชื่อถือได้สำหรับภาพเคลื่อนไหวทางเทคนิค.

ไลบรารี Force.js เป็นสคริปต์โอเพ่นซอร์สฟรีที่สร้างขึ้นรอบ ๆ ภาพเคลื่อนไหวหน้าแบบไดนามิก.

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

โดยค่าเริ่มต้น Force.js อาศัยการเปลี่ยน CSS เมื่อใดก็ตามที่เป็นไปได้ เหล่านี้ ทำงานในเบราว์เซอร์ที่ทันสมัยทั้งหมด และรหัสนั้นง่ายกว่ามากอีกทั้งยังให้การสนับสนุนที่กว้างขึ้นสำหรับผู้ใช้ที่ ไม่อนุญาต JavaScript.

ห้องสมุดใช้ วิธีสำรองทางเลือกด้วยรหัส JavaScript, ดังนั้นจึงปลอดภัยสำหรับเบราว์เซอร์รุ่นเก่าเช่นกัน.

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

เทคนิคการทำแอนิเมชั่นใหญ่สองอย่างคือ กระโดด และ การเคลื่อนไหว. คุณเป็นตัวกำหนดว่าองค์ประกอบใดที่กำลังเคลื่อนที่อยู่ความเร็วในการเคลื่อนที่และวิธีการผ่อนคลายแบบใด.

ห้องสมุดยังมี พวงของตัวเลือกที่กำหนดเอง คุณสามารถปรับแต่งภาพเคลื่อนไหวได้มากขึ้น คุณสามารถ แก้ไขเป้าหมายการเชื่อมโยงจุดยึด และ ตั้งค่าที่ช่วยให้คุณต้องการ-แม้ว่าคุณจะต้องการการผ่อนคลายที่แตกต่างกันในหน้าเดียวกัน!

เอกสารทั้งหมดเป็น มีอยู่ใน GitHub, พร้อมกับไฟล์.

หรือถ้าคุณต้องการ npm / Bower คุณสามารถ ดึงไฟล์โดยตรง ทางนั้น. คุณแค่ต้อง รวมถึงหนึ่ง force.js ไฟล์ ในส่วนหัวของคุณและคุณจะดีไป.

ฉันยังแนะนำให้อ่านเอกสารเพราะมันเต็มไปด้วย ตัวอย่างสำหรับ กระโดด() และ ย้าย() วิธีการ.

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