Tuesday.css เป็น The Animation Animation ตอนนี้
โดยตอนนี้คุณควรจะคุ้นเคยกับ Animate.css เช่น ไลบรารีแอนิเมชันหลัก ในหมู่นักออกแบบเว็บไซต์.
แต่มีเด็กใหม่ในบล็อกชื่อ วันอังคาร, และมัน การเคลื่อนไหวของเว็บโดยการบังคับ.
ไลบรารีใหม่นี้มีรูปแบบหรือการนำไปใช้งานไม่แตกต่างกันมากนัก แต่วันอังคารมาพร้อมกับหยิบ ภาพเคลื่อนไหว CSS ใหม่ นั่นคุณ ไม่สามารถหาที่อื่นได้.
เอฟเฟกต์ใหม่เหล่านี้คือ ลึกซึ้งยิ่งขึ้นในธรรมชาติ ดังนั้นพวกเขาจริงๆ ผสมผสานเป็นหน้าอย่างสวยงาม. นี่คือ รายการเล็ก ๆ ของผลกระทบ คุณสามารถเลือกจาก:
- เลือน & ขยาย
- จางหายไป
- ประทับตราและตีกลับ
- แกว่งมุม
- ดร็อปจากซ้าย / ขวา
- สควอช / ยืด
- หลักการ
หากคุณผ่านรายการนี้ในหน้าตัวอย่างคุณจะสังเกตเห็นว่าเอฟเฟกต์ทั้งหมดมี สิ่งหนึ่งที่เหมือนกันคือฟิสิกส์.
พวกเขาทั้งหมดรู้สึกมาก สมจริงกับพื้นฐานของฟิสิกส์, และพวกเขาดูเหมือนจะ ปฏิบัติตามกฎของแรงโน้มถ่วง. ภาพเคลื่อนไหวเหล่านี้ไม่มีภาพเคลื่อนไหวใด ๆ หรือผิดเพี้ยนไปจากภายนอก พวกเขากำลัง บอบบาง แต่เห็นได้ชัด และที่สำคัญกว่านั้นคือ เชื่อได้.
ฉันคิดว่าวันอังคารเป็นหนึ่งในไลบรารี่แอนิเมชั่น CSS ที่ทันสมัยที่สุดเพราะนำเสนอ มุมมองที่เหมือนจริงของภาพเคลื่อนไหวบนเว็บ.
เราไม่ควรออกแบบเอฟเฟกต์อินเทอร์เฟซบ้าที่โดดเด่นเหมือนนิ้วโป้ง. ความละเอียดอ่อน เป็นชื่อของเกมเสมอเพราะมัน สร้างความรู้สึกโต้ตอบ จากอินพุตของผู้ใช้ไม่ว่าจะเป็นการคลิกหรือการเลื่อน.
ปัญหาที่เกิดขึ้นมักจะเขียนแอนิเมชั่นเหล่านี้ตั้งแต่ต้นและทำให้พวกมันดูเหมาะสม แต่ตอนนี้วันอังคารกับความกังวลของคุณสามารถบินออกจากประตูได้ทันที.
เพียงแค่ ดาวน์โหลดสำเนาจาก GitHub และ เพิ่ม .CSS ไฟล์ไปยังหน้าของคุณ. คุณทำได้จริง ใช้เวอร์ชัน CDN โดยตรงจาก GitHub ถ้าคุณไม่ต้องการดาวน์โหลดอะไรในเครื่อง.
เมื่อสิ่งนี้ถูกเพิ่มไปยังหน้าเว็บของคุณเพียง ผนวก .มีชีวิต คลาสพร้อมกับคลาสที่เป็นกรรมสิทธิ์ใด ๆ ที่ระบุไว้ใน repo GitHub รหัสของคุณอาจมีลักษณะเช่นนี้:
มันคือวันอังคาร.
ลองดูที่ เอกสารเต็มรูปแบบ เพื่อที่จะได้เห็น รายการคลาสแอนิเมชั่นเข้า / ออกทั้งหมด.
หากคุณทำงานกับ JavaScript คุณก็สามารถทำได้เช่นกัน เพิ่มคลาสเหล่านี้แบบไดนามิก เมื่อคลิก / โฮเวอร์กิจกรรม วิธีนี้คุณสามารถเพิ่มคลาสภาพเคลื่อนไหวได้ก็ต่อเมื่อผู้ใช้คลิกปุ่มซึ่งจะทำให้เคลื่อนไหวเมื่อคลิก.
มีอะไรมากมายที่คุณทำได้ในวันอังคารและมันก็เป็น Animate.css ใหม่สำหรับแอนิเมชั่น UI ที่ใช้งานได้จริง.
ลองดูที่ หน้าตัวอย่าง เพื่อดูว่ามันทำงานจริงและคุณสามารถเรียนรู้เพิ่มเติมโดยการอ่านผ่าน “ในการทำ” เสา ซึ่งพูดถึงเกี่ยวกับวิธีที่ทีม Shakr สร้างเมื่อวันอังคาร.
