Wicked CSS - ไลบรารีแอนิเมชันใหม่ที่มาแรงใน Pure CSS3
ขอบคุณ CSS3 คุณสามารถสร้างแอนิเมชั่นบ้าๆบอ ๆ บนเว็บได้ สิ่งเหล่านี้สามารถ ทำงานกับเบราว์เซอร์และองค์ประกอบหน้าทั้งหมด เพื่อควบคุมรายการการนำทางดร็อปดาวน์แท็บคุณตั้งชื่อ.
ในความเป็นจริงคุณสามารถสร้างรหัสเหล่านี้แบบไดนามิกโดยใช้เครื่องมือภาพเคลื่อนไหว แต่ค่อนข้าง จำกัด เมื่อเทียบกับไลบรารี่อนิเมชั่น.
Wicked CSS เป็นห้องสมุดใหม่ล่าสุดในประเภทนี้ สิ่งนี้ทำให้ฉันนึกถึงต้น Animate.css ซึ่งค่อนข้างเรียบง่ายและเป็นพื้นฐาน, แต่สามารถใช้ในเว็บไซต์ใดก็ได้.
ลองดูที่หน้าแรกของการสาธิตสดพร้อมกับรายการภาพเคลื่อนไหวที่รองรับทั้งหมด ในการเขียนบทความนี้ฉันนับ รูปแบบภาพเคลื่อนไหวรวม 24 รูปแบบตั้งแต่สไลด์ไปจนถึงการหมุน และเอฟเฟกต์การเต้น / การกระดอน.
ภาพเคลื่อนไหวเหล่านี้จำนวนมากเป็นคุณลักษณะแบบใช้ครั้งเดียวที่ใช้เพื่อนำองค์ประกอบเข้าสู่มุมมอง (หรือมองออก) สิ่งนี้มีประโยชน์สำหรับหน้าเว็บที่มีภาพเคลื่อนไหวแบบเลื่อนเพื่อดูที่กำหนดเป้าหมายองค์ประกอบของหน้าเฉพาะ.
แต่คุณก็สามารถทำได้ ใช้สิ่งนี้เพื่อแสดง (หรือซ่อน) รายการหน้าพิเศษ เช่นเมนูแบบเลื่อนลงแถบค้นหารูปแบบการสมัครที่ซ่อนอยู่หรือสิ่งอื่นใด นี่เป็นรายการภาพเคลื่อนไหวขนาดเล็กที่คุณสามารถเลือกได้จาก:
- เขย่า
- ซูมเข้า / ออก
- เลื่อนขึ้น / ลง
- จางเข้า / ออก
- กลิ้งเข้า / ออก
- ตีกลับและป๊อป
- การหมุนวนเข้า / ออก
ลักษณะภาพเคลื่อนไหวเหล่านี้ทั้งหมดได้รับการออกแบบมาเพื่อการใช้งานเพียงครั้งเดียว พวกเขาสามารถเรียกหลายครั้งต่อหน้าและต่อองค์ประกอบ แต่ ภาพเคลื่อนไหวเหล่านี้ไม่ได้ทำซ้ำ.
แต่คุณจะใช้สิ่งเหล่านี้โดยขึ้นอยู่กับลักษณะการคลิกการเลื่อนเมาส์หรือการปัดนิ้วของผู้ใช้ นอกจากนี้ยังสามารถใช้กับปุ่ม CTA สำหรับเอฟเฟกต์การเต้น / การสั่นได้ แต่ต้องใช้ฟังก์ชันกำหนดเวลา JavaScript.
ลองดูที่หน้าตัวอย่างเพื่อดูตัวอย่างสดและรายละเอียดเพิ่มเติม นอกจากนี้คุณยังจะได้พบกับเอกสารเต็มรูปแบบในเว็บไซต์หลักพร้อมกับ GitHub repo.
Wicked CSS เป็นไลบรารี่ที่ใหม่กว่า แต่ห้องสมุดมีความเสถียรและมีแนวโน้มที่จะอยู่ได้อีกหลายปี.
