โฮมเพจ » Toolkit » Wicked CSS - ไลบรารีแอนิเมชันใหม่ที่มาแรงใน Pure CSS3

    Wicked CSS - ไลบรารีแอนิเมชันใหม่ที่มาแรงใน Pure CSS3

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

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

    Wicked CSS เป็นห้องสมุดใหม่ล่าสุดในประเภทนี้ สิ่งนี้ทำให้ฉันนึกถึงต้น Animate.css ซึ่งค่อนข้างเรียบง่ายและเป็นพื้นฐาน, แต่สามารถใช้ในเว็บไซต์ใดก็ได้.

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

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

    แต่คุณก็สามารถทำได้ ใช้สิ่งนี้เพื่อแสดง (หรือซ่อน) รายการหน้าพิเศษ เช่นเมนูแบบเลื่อนลงแถบค้นหารูปแบบการสมัครที่ซ่อนอยู่หรือสิ่งอื่นใด นี่เป็นรายการภาพเคลื่อนไหวขนาดเล็กที่คุณสามารถเลือกได้จาก:

    • เขย่า
    • ซูมเข้า / ออก
    • เลื่อนขึ้น / ลง
    • จางเข้า / ออก
    • กลิ้งเข้า / ออก
    • ตีกลับและป๊อป
    • การหมุนวนเข้า / ออก

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

    แต่คุณจะใช้สิ่งเหล่านี้โดยขึ้นอยู่กับลักษณะการคลิกการเลื่อนเมาส์หรือการปัดนิ้วของผู้ใช้ นอกจากนี้ยังสามารถใช้กับปุ่ม CTA สำหรับเอฟเฟกต์การเต้น / การสั่นได้ แต่ต้องใช้ฟังก์ชันกำหนดเวลา JavaScript.

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

    Wicked CSS เป็นไลบรารี่ที่ใหม่กว่า แต่ห้องสมุดมีความเสถียรและมีแนวโน้มที่จะอยู่ได้อีกหลายปี.