คุณทราบหรือไม่ว่าก่อนปี 1999 นักพัฒนาและนักออกแบบเว็บจำกัดไว้เฉพาะโปรแกรมเล่น Flash และ gif เมื่อใดก็ตามที่พวกเขาต้องการทำให้รายการเคลื่อนไหวบนหน้าเว็บ คุณสมบัติแอนิเมชั่น เช่น เอฟเฟ็กต์โฮเวอร์ ถูกนำมาใช้กับ CSS3 ในช่วงปลายทศวรรษ 1990
ขณะนี้เรามีคุณสมบัติแอนิเมชันมากมายที่นักพัฒนาเว็บสามารถใช้เพื่อสร้างหน้าเว็บที่ดึงดูดสายตา ข่าวดีก็คือ คุณสามารถข้ามการสร้างคุณสมบัติแอนิเมชันตั้งแต่เริ่มต้น หากคุณสามารถเข้าถึงคลังแอนิเมชันต่างๆ ได้
CSS Animation Libraries เป็นบล็อกโค้ดหรือคอลเลกชั่นที่สร้างไว้ล่วงหน้าของแอนิเมชั่นและเอฟเฟ็กต์ CSS ที่คุณสามารถเพิ่มลงในหน้าเว็บของคุณเพื่อดึงดูดสายตา คุณสามารถเพิ่มเอฟเฟ็กต์ภาพเคลื่อนไหวที่ออกแบบไว้ล่วงหน้าเหล่านี้ให้กับองค์ประกอบต่างๆ เช่น ข้อความ รูปภาพ และวิดีโอบนหน้าเว็บของคุณ
เหตุใดจึงต้องใช้ CSS Animation Libraries
- ประหยัดเวลา: การจัดรูปแบบอาจใช้เวลามาก ซึ่งหมายความว่าใช้เวลาน้อยลงในการสร้างฟังก์ชันการทำงาน โชคดีที่ไลบรารีแอนิเมชัน CSS มีส่วนประกอบที่สร้างไว้ล่วงหน้า หมายความว่าคุณไม่จำเป็นต้องสร้างทุกอย่างตั้งแต่เริ่มต้น
- การจัดรูปแบบที่สอดคล้องกัน: เมื่อแอปของคุณเติบโตขึ้น คุณจะต้องจัดรูปแบบให้สอดคล้องกัน ไลบรารีแอนิเมชันสามารถช่วยให้มีสไตล์ที่สอดคล้องกันทั่วทั้งหน้าเว็บของคุณ
- ปรับแต่งได้ง่าย: แม้ว่าไลบรารี่เหล่านี้จะมีรหัสสำเร็จรูป แต่คุณสามารถเพิ่มองค์ประกอบใหม่ ลบบางรายการ หรือแม้แต่เปลี่ยนสีและแบบอักษรให้เหมาะกับความต้องการของคุณ
- ได้รับการเพิ่มประสิทธิภาพ: ผู้ใช้สมัยใหม่สามารถเรียกดูเว็บไซต์ผ่านอุปกรณ์และเบราว์เซอร์ต่างๆ เทมเพลตโค้ดจากไลบรารีแอนิเมชัน CSS ส่วนใหญ่ได้รับการปรับให้เหมาะกับขนาดหน้าจอและเบราว์เซอร์ต่างๆ
เหล่านี้คือ CSS Animation Libraries ที่ดีที่สุดที่คุณสามารถลองใช้ได้ในวันนี้
ภาพเคลื่อนไหว.css
Animate.css เป็นไลบรารีแอนิเมชันที่พร้อมใช้งาน ซึ่งคุณสามารถใช้กับโปรเจ็กต์เว็บถัดไปของคุณได้ เป็นตัวเลือกที่ยอดเยี่ยมในการเน้นองค์ประกอบบางอย่าง และสร้างคำแนะนำ แถบเลื่อน และโฮมเพจที่ดึงดูดความสนใจ
คุณสมบัติที่สำคัญ
- ใช้งานง่าย: คุณเพียงแค่ต้องเพิ่มไลบรารีนี้ผ่าน CDN หรือติดตั้งโดยใช้ตัวจัดการแพ็คเกจ เช่น Yarn หรือ NPM เพื่อเริ่มใช้งาน
- มีเทมเพลตมากมาย: หน้าแรกมีเทมเพลตมากมายที่คุณสามารถทดสอบก่อนที่จะรวมไว้ในโปรเจ็กต์ของคุณ
- เข้ากันได้กับ JavaScript: คุณสามารถเพิ่มการโต้ตอบให้กับ Animate.css ได้โดยการรวมเข้ากับ JavaScript
Animate.css เป็นไลบรารีโอเพ่นซอร์สฟรี
อนิมิสต้า
Animista เป็นไลบรารีแอนิเมชัน CSS ตามความต้องการ ในฐานะนักพัฒนาเว็บ/นักออกแบบ คุณสามารถทดสอบ ปรับแต่ง และเลือกแอนิเมชั่นที่ออกแบบไว้ล่วงหน้าที่เหมาะกับคุณ
คุณสมบัติ
- เข้าถึงได้ง่าย: เมื่อคุณระบุแอนิเมชันที่เหมาะกับโปรเจ็กต์ของคุณแล้ว คุณสามารถคัดลอกและวางลงในรายการโปรดหรือดาวน์โหลดไฟล์ลงในเครื่องของคุณ
- ภาพเคลื่อนไหวที่จัดหมวดหมู่: ภาพเคลื่อนไหวที่ออกแบบไว้ล่วงหน้าได้รับการจัดหมวดหมู่เพื่อให้เข้าถึงได้ง่าย คุณสามารถดูวิธีการทำงานของแอนิเมชั่นเหล่านี้ได้โดยคลิกที่ตัวอย่างบนเว็บไซต์
- ปรับแต่งได้: คุณไม่จำเป็นต้องเลือกแอนิเมชั่นเหล่านี้เหมือนที่เป็นอยู่ คุณสามารถปรับแต่งรหัสให้เหมาะกับความต้องการของคุณและดูการเปลี่ยนแปลงแบบเรียลไทม์ จากนั้น คุณสามารถเลือกรหัสของคุณและเพิ่มลงในเว็บไซต์ของคุณเมื่อคุณพอใจกับการทำงานแล้ว
Animista เป็นไลบรารี CSS ฟรี
UI เคลื่อนไหว
Motion UI มาพร้อมกับเอฟเฟ็กต์ในตัวเพื่อทำให้เว็บไซต์ของคุณเคลื่อนไหวได้ง่ายดาย เอฟเฟ็กต์ที่สร้างไว้ล่วงหน้าจะรวมเป็นคลาส CSS ในไลบรารี Saas นี้
คุณสมบัติ
- การกำหนดค่าอย่างง่าย: คุณสามารถติดตั้ง Motion UI โดยใช้ Bower หรือ NPM จากนั้นคุณสามารถ @include หรือ @import ไลบรารีไปยังไฟล์ CSS หรือ SASS ตามลำดับ
- เข้ากันได้กับ JavaScript: ไลบรารีนี้มีไลบรารี JavaScript ขนาดเล็กที่คุณสามารถใช้เพื่อเล่นการเปลี่ยน
- ปรับแต่งได้: แดชบอร์ดช่วยให้นักพัฒนาเว็บสามารถปรับแต่งเอฟเฟกต์แอนิเมชั่นได้ตามต้องการ เอฟเฟ็กต์ความเร็ว การค่อยๆ เปลี่ยน และการจางหายเป็นบางสิ่งที่คุณปรับแต่งได้
Motion UI เป็นโครงการโอเพ่นซอร์ส
lightGallery
lightGallery เป็นไลบรารี่ขนาดเบาที่นักพัฒนาสามารถใช้เพื่อสร้างแกลเลอรีวิดีโอและรูปภาพที่สวยงามสำหรับเว็บแอปพลิเคชัน คุณสามารถใช้ไลบรารีนี้ได้กับแกลเลอรีหลักทั้งหมด
คุณสมบัติ
- ตอบสนองอย่างเต็มที่: คลาส CSS ของ LightGallery ตอบสนองต่อขนาดหน้าจอที่แตกต่างกัน ไลบรารีนี้ได้รับการปรับให้เหมาะกับอุปกรณ์ระบบสัมผัสด้วย
- มาพร้อมกับปลั๊กอินต่างๆ: คุณสามารถปรับปรุงความสามารถในการใช้งานของไลบรารีนี้ผ่านปลั๊กอิน เช่น ภาพขนาดย่อ วิดีโอ และ MediumZoom
- ปรับแต่งได้: หลังจากเลือกคลาส CSS ของคุณแล้ว คุณสามารถปรับแต่งให้เหมาะกับความต้องการของคุณได้
- รองรับวิดีโอ: lightGallery เข้ากันได้กับ YouTube, Wistia และ Vimeo
lightGallery เป็นโอเพ่นซอร์สและห้องสมุดฟรี
ตัวโหลด CSS บริสุทธิ์
Pure CSS Loaders เป็นชุดของแอนิเมชั่น CSS ที่เป็นมิตรกับ dev ซึ่งปรับให้เหมาะกับความเร็ว
คุณสมบัติ
- ใช้งานง่าย: คุณไม่จำเป็นต้องติดตั้งอะไรเพื่อใช้ห้องสมุดนี้ คลิกที่ตัวโหลดที่คุณต้องการใช้เพื่อเปิดเผยรหัสและคัดลอกและวางลงในโครงการของคุณ
- ปรับแต่งได้: ห้องสมุดนี้มีหกสีให้เลือกสำหรับรถตักของคุณ คุณสามารถเลือกได้ และแพลตฟอร์มจะจัดเตรียมบล็อกรหัสที่สอดคล้องกัน
- คอลเลกชันที่กว้างขวาง: Pure CSS Loaders เป็นส่วนหนึ่งของคลาส CSS มากมายบนเว็บไซต์หลัก
- เข้ากันได้กับเบราว์เซอร์หลัก
Pure CSS Loaders มีแพ็คเกจฟรีพร้อมทรัพยากรฟรีสูงสุด 10 รายการ แพ็คเกจแบบชำระเงินเริ่มต้นที่ $9.99/เดือน
อนิเมXYZ
AnimXYZ ช่วยให้นักพัฒนาเว็บมีวิธีง่ายๆ ในการทำให้องค์ประกอบเคลื่อนไหวโดยการอธิบายภาพเคลื่อนไหวด้วยตัวแปรและคุณลักษณะบางอย่าง ไลบรารีนี้ใช้ตัวแปร CS ภายใต้ประทุน
คุณสมบัติ
- ข้ามแพลตฟอร์ม: คุณสามารถใช้ AnimXYZ กับหน้า HTML, React และ Vue JS
- เอกสารประกอบที่ครอบคลุม: เอกสารมีทุกสิ่งที่คุณต้องการในการสร้างแอนิเมชั่นขั้นสูงอย่างง่าย
- ห้องสมุดที่ครอบคลุม: แพลตฟอร์มนี้มีแอนิเมชั่นหลายร้อยรายการที่คุณสามารถเลือกได้
- การออกแบบที่ตอบสนอง: คลาส CSS ที่จัดทำโดย AnimXYZ นั้นตอบสนองต่อขนาดหน้าจอที่แตกต่างกัน
- ปรับแต่งได้: คุณสามารถปรับแต่งโค้ด CSS บนแพลตฟอร์มนี้ให้เหมาะกับความต้องการของคุณ
AnimXYZ เป็นโครงการโอเพ่นซอร์ส
โฮเวอร์.CSS
Hover.css คือชุดของเอฟเฟ็กต์โฮเวอร์ที่คุณสามารถนำไปใช้กับปุ่ม ลิงก์ รูปภาพ และรูปภาพเด่นได้
คุณสมบัติ
- ใช้ได้กับเทคโนโลยีต่างๆ: คุณสามารถใช้ Hover.css กับไฟล์ CSS, SASS และ LESS
- เอฟเฟ็กต์ที่จัดกลุ่ม: หน้าแรกมีหมวดหมู่ต่างๆ เพื่อให้คุณประหยัดเวลา ตัวอย่างเช่น หมวดหมู่การเปลี่ยนพื้นหลังมีเอฟเฟ็กต์ต่างๆ ที่คุณสามารถใช้เป็นพื้นหลังสำหรับองค์ประกอบของหน้าเว็บได้
- การสนับสนุนข้ามเบราว์เซอร์: Hover.CSS ทำงานร่วมกับเบราว์เซอร์หลักโดยมีข้อยกเว้นบางประการ ตัวอย่างเช่น Internet Explorer รุ่นด้านล่างไม่รองรับการเปลี่ยนภาพและภาพเคลื่อนไหว
Hover.CSS ฟรีสำหรับการใช้งานส่วนบุคคล ใบอนุญาตเชิงพาณิชย์สำหรับห้องสมุดนี้เริ่มต้นที่ $14/โครงการ
อนิเมชั่นทั้งหมด
แอนิเมชันทั้งหมดคือชุดของแอนิเมชัน CSS ที่คุณสามารถใช้เพื่อทำให้โปรเจกต์เว็บของคุณมีชีวิตชีวา คุณสามารถใช้ไลบรารีนี้กับ CSS หรือ SCSS
คุณสมบัติ
- ใช้งานง่าย: คุณเพียงแค่ต้องติดตั้งไลบรารี All Animation โดยใช้ NPM หรือ Yarn และรวมไฟล์ไว้ในส่วนหัวเพื่อเริ่มต้น
- เอฟเฟ็กต์ตามหมวดหมู่: เอฟเฟ็กต์แอนิเมชั่นในหน้านี้ถูกจัดกลุ่มไว้เพื่อช่วยให้คุณใช้เวลาอย่างสะดวกขณะเรียกดู บางหมวดหมู่ ได้แก่ Fading Entrances, Bounce, Vibrate และ Jello
- รองรับ JavaScript: คุณสามารถเพิ่มภาพเคลื่อนไหวตามเหตุการณ์โดยใช้ JavaScript หรือ JQuery ธรรมดา
อนิเมชั่นทั้งหมดเป็นไลบรารีโอเพ่นซอร์สฟรี
สามจุด
Three Dots คือชุดของแอนิเมชั่นการโหลด CSS ที่คุณสามารถใช้เพื่อทำให้เว็บไซต์ของคุณดูดึงดูดสายตา
คุณสมบัติ
- การสาธิตเชิงโต้ตอบ: คุณสามารถจินตนาการว่าแอนิเมชั่นจะเป็นอย่างไรโดยดูจากหน้าแรกของไซต์นี้
- ติดตั้งง่าย: คุณเพียงแค่ต้องติดตั้งไลบรารี Three Dots โดยใช้ npm จากนั้นจึงนำเข้าสไตล์ไปยังไฟล์ SASS ของคุณเพื่อเริ่มต้น
- มีจุด 3 จุดให้เลือกหลากหลาย: Three Dots ไม่ได้จำกัดคุณเพราะมันมาพร้อมกับแอนิเมชั่นมากมายที่คุณสามารถเลือกได้
Three Dots เป็นไลบรารี CSS แบบโอเพ่นซอร์สฟรี
ซีเอสเชค
CSShake เป็นไลบรารี CSS ที่มีคอลเลกชันของแอนิเมชั่นการสั่นเพื่อเพิ่มความดึงดูดสายตาให้กับเว็บไซต์ของคุณ
คุณสมบัติ
- การสาธิตสด: หน้าแรกมีการสาธิตการเขย่าต่างๆ เพื่อช่วยให้คุณทดสอบข้อมูลโค้ดก่อนที่จะเพิ่มลงในเว็บไซต์ของคุณ
- การผสานรวมอย่างง่าย: คุณเพียงแค่ต้องติดตั้ง CSShake โดยใช้ npm และรวมไว้ในไฟล์ CSS ของคุณเพื่อเริ่มต้น
- เอกสารประกอบที่ครอบคลุม: คำแนะนำทีละขั้นตอนจะช่วยให้คุณตั้งค่าไลบรารีในโฟลเดอร์โครงการได้อย่างรวดเร็ว
- ปรับแต่งได้: คุณสามารถปรับแต่งข้อมูลโค้ดจากเว็บไซต์นี้ให้เหมาะกับธีมของคุณ
CSShake เป็นไลบรารีแอนิเมชัน CSS แบบโอเพ่นซอร์สฟรี
แอนิเมชั่นมายากล
Magic Animations เป็นชุดของคลาสแอนิเมชั่นสำหรับปรับปรุงความน่าดึงดูดใจของเว็บไซต์
คุณสมบัติ
- คลาสแอนิเมชั่นที่หลากหลาย: มีคลาสที่แตกต่างกัน เช่น Magic Effects, Static Effects, Bling, On The Space และ Math
- รองรับ JavaScript: คุณสามารถใช้ไลบรารีนี้กับ JQuery เพื่อปรับปรุงการโต้ตอบบนเว็บไซต์ของคุณ
- รองรับหลายเบราว์เซอร์: Magic Animations รองรับเบราว์เซอร์หลักๆ เช่น Google Chrome, Mozilla Firefox, Opera และ Safari
- เอกสารประกอบโดยละเอียด: ไลบรารีมีเอกสารประกอบเพื่อช่วยให้คุณเริ่มต้นได้อย่างรวดเร็ว
Magic Animations เป็นไลบรารี CSS แบบโอเพ่นซอร์สฟรีที่สนับสนุนโดยชุมชน
แอมเบอร์เกอร์
Amburgers คือชุดของไอคอนเคลื่อนไหวที่นักพัฒนาสามารถใช้เพื่อแสดงรายการเมนูบนหน้าเว็บ
คุณสมบัติ
- การสาธิตสดเชิงโต้ตอบ: คุณสามารถจินตนาการว่าแอนิเมชั่นเหล่านี้จะเป็นอย่างไรก่อนที่คุณจะเพิ่มลงในเว็บไซต์ของคุณ
- การรวมที่ตรงไปตรงมา: ดาวน์โหลดและรวมแฮมเบอร์เกอร์เคลื่อนไหวในส่วน ของไฟล์ HTML ของคุณเพื่อเริ่มใช้ไลบรารีนี้
- ปรับแต่งได้: การใช้ไลบรารีนี้ คุณสามารถเปลี่ยนฟอนต์ สี และอื่นๆ อีกมากมาย
- รองรับหลายเบราว์เซอร์: คุณสามารถใช้ Animated Hamburgers กับเบราว์เซอร์หลักๆ ยกเว้น Opera Mini
Animated Hamburgers เป็นไลบรารีโอเพ่นซอร์สฟรีที่มีซอร์สโค้ดโฮสต์อยู่บน GitHub
วน
Whirl เป็นชุดของแอนิเมชั่นการโหลด CSS ที่คุณสามารถรวมเข้ากับหน้าเว็บของคุณได้อย่างง่ายดาย
คุณสมบัติ
- การกำหนดค่าอย่างง่าย: คุณสามารถติดตั้ง Whirl โดยใช้ npm หรือเส้นด้าย
- อเนกประสงค์: คุณสามารถใช้ Whirl กับ CSS และ SASS
- วนเป็นตัน: แพลตฟอร์มมี 106 วนให้เลือก
Whirl เป็นไลบรารี CSS แบบโอเพ่นซอร์สฟรี
ความคิดสุดท้าย
ตอนนี้คุณมี CSS Animation Libraries มากกว่าหนึ่งโหลที่คุณสามารถใช้เพื่อปรับปรุงความดึงดูดสายตาของหน้าเว็บและการมีส่วนร่วมของผู้ใช้ ทางเลือกของคลังแอนิเมชั่นจะขึ้นอยู่กับเป้าหมายและความชอบของคุณ
หากคุณต้องการพัฒนาทักษะ CSS โปรดดู CSS Cheat Sheets
