สร้างวิดเจ็ตเคลื่อนไหวอย่างสมบูรณ์ด้วย Shift.css

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

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

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

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

ไลบรารีมาพร้อมกับไฟล์สองไฟล์ .CSS และ .js ห้องสมุดและทั้งคู่จะต้องเป็น เพิ่มไว้ในหัวเอกสารของคุณแล้ว.

ฉันไม่พบ repo GitHub ใด ๆ สำหรับโครงการนี้ดังนั้นคุณจะต้อง ดาวน์โหลดไฟล์โดยตรง จากเว็บไซต์ Shift.css.

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

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

1. ข้อมูลภาพเคลื่อนไหว: ชื่อภาพเคลื่อนไหว
2. ข้อมูลล่าช้า: ความล่าช้าทั้งหมด (เป็นวินาที) ก่อนที่ภาพเคลื่อนไหวจะเริ่มขึ้น
3. ข้อมูลระยะเวลา: ความยาวทั้งหมด (เป็นวินาที) ของภาพเคลื่อนไหว

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

เพียงแค่ คัดลอกวาง สิ่งที่คุณต้องการ ในการตั้งค่าชื่อภาพเคลื่อนไหว และคุณควรจะไปดี! ตัวอย่างเช่นถ้าฉันต้องการใช้แอนิเมชั่นจางหายฉันต้องการเพิ่ม ข้อมูลภาพเคลื่อนไหว = "shift_exitFade" ในฐานะที่เป็นข้อมูลคุณลักษณะขององค์ประกอบใด ๆ ที่ควรมีชีวิตแบบนั้น peasy ง่าย ๆ.

ฉันหวังว่าห้องสมุดนี้มาพร้อมกับตัวเลือกเพิ่มเติมใน JavaScript เพราะจะช่วยให้นักพัฒนาสามารถควบคุมตำแหน่งและคุณลักษณะได้มากขึ้น แต่สำหรับกรอบอนิเมชั่นที่เรียบง่าย (และฟรี) ฉันไม่สามารถบ่นได้.

Shift.css เหมาะสำหรับ นักพัฒนาใหม่ ผู้ที่ต้องการสร้าง รูปแบบภาพเคลื่อนไหวที่ซับซ้อนมากขึ้น โดยไม่ต้องเขียนโค้ด verbose ตั้งแต่เริ่มต้น.