10 เครื่องมือนิเมชั่น CSS3 ที่คุณควรคั่นไว้

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

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

ลองชมภาพเคลื่อนไหวบางอย่างที่เป็นไปได้ด้วย CSS:

• 38 การสาธิตการเคลื่อนไหวของ CSS3 Animation
• 15 เอฟเฟ็กต์ข้อความที่สวยงามที่สร้างขึ้นด้วย CSS
• 30 ภาพเคลื่อนไหว CSS ที่ยอดเยี่ยมที่คุณต้องดู
• วิธีการสร้างเอฟเฟ็กตีกลับด้วย CSS3 Animation

ในโพสต์นี้เราจะมาดูเครื่องมือที่ยอดเยี่ยม 10 อย่างที่ทำให้ง่ายขึ้นและเร็วขึ้นในการสร้างภาพเคลื่อนไหวของคุณเอง.

1. CSS3Gen CSS3 Animation Generator

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

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

2. ภาพเคลื่อนไหว CSS

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

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

3. เครื่องสร้าง CSS Animation

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

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

4. ภาพเคลื่อนไหวเวทย์มนตร์

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

สิ่งที่คุณต้องทำคือดาวน์โหลดรหัสรวมไฟล์ CSS ลงในหน้า HTML ของคุณและเพิ่มคลาสที่เหมาะสมด้วยความช่วยเหลือของ jQuery ด้วยวิธีต่อไปนี้:

 $ ('. yourdiv'). hover (ฟังก์ชั่น () $ (นี่) .addClass ('magictime puffIn'););

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

5. Animate.css

Animate.css ให้ชุดของ ภาพเคลื่อนไหว CSS3 ที่เจ๋งและข้ามเบราว์เซอร์. อนิเมชั่นแบ่งออกเป็นกลุ่มเช่น Attention Seekers, Bouncing Entrances, Bouncing Exits, Fading Entrances และอื่น ๆ อีกมากมายดังนั้นคุณไม่สามารถบ่นเกี่ยวกับการขาดตัวเลือก.

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

6. Bounce.js

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

7. AniJS

AniJS เป็นไลบรารี JavaScript supercool ที่ให้คุณเพิ่มภาพเคลื่อนไหว CSS3 ในการออกแบบของคุณและเพื่อ สร้างส่วนประกอบ UI ที่ซับซ้อน เช่นแท็บภาพเคลื่อนไหวแอคคอร์เดียนโมดอลเมนูเลื่อนการแจ้งเตือนแอพมือถือการเลื่อนเผยและอื่น ๆ อีกมากมาย.

มันทำงานร่วมกับเบราว์เซอร์ที่ทันสมัยทั้งหมดรวมถึง iOS และ Android ไม่จำเป็นต้องมีห้องสมุดของบุคคลที่สามและมีการแสดงที่น่าทึ่งที่เรียกว่า AniCollection ซึ่งคุณสามารถทดลองกับเอฟเฟกต์ต่างๆ.

8 CSS องค์ประกอบเดี่ยว

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

9. เครื่องวัดระยะทาง

วัดระยะทาง เป็นเครื่องมือที่ยอดเยี่ยมในการ วางภาพเคลื่อนไหวที่น่าสนใจลงบนไซต์ของคุณ. มันเป็นห้องสมุด CSS และ JavaScript ส่วน CSS ถูกเขียนใน Sass และคุณสามารถเลือกจากชุดรูปแบบที่แตกต่างกันเช่น “ดิจิตอล”, “สถานีรถไฟ”, และ “รถ”.

ในการใช้เครื่องวัดระยะทางคุณต้องเพิ่มไฟล์ JavaScript และไฟล์ชุดรูปแบบที่เลือกลงในหน้า HTML ของคุณจากนั้นเลือก class = "ระยะทาง" เลือกองค์ประกอบที่คุณต้องการสร้างเป็นเครื่องวัดภาพเคลื่อนไหว ทางเลือกที่เหมาะอย่างยิ่งในการแสดงข้อมูลหรือสร้าง “เร็ว ๆ นี้” หน้าสะดุดตามากขึ้น.

10. Snabbt.js

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

คุณต้องเขียน JavaScript เล็กน้อยถ้าคุณต้องการใช้ไลบรารี่นี้ แต่ผลที่ออกมานั้นน่าประทับใจมาก.