Animate.css

Animate.css

ถ้าการทำเอนนิเมทด้วย CSS มันยากเย็นแสนเข็นมาลองของใหม่กัน Animate.css จะทำให้เราสามารถสร้างเอนนิเมทในเว็บไซต์ด้วย CSS แบบโครตง่ายแค่ใส่ class

ก่อนอื่นเลยครับ ก่อนที่เราจะเข้าบทความกันให้เราไปที่เว็บไซต์ https://daneden.github.io/animate.css/ เพื่อดูกันก่อนว่าสิ่งที่เราต้องการจะทำนั้นคืออะไร ลองคลิกดูว่ามีอะไรเกิดขึ้นบ้าง สิ่งที่เราได้เห็นไปมันคือการทำเอนนิเมทในเว็บไซต์โดยการใช้คำสั่ง CSS ล้วนครับ ต้องบอกเลยว่าเมื่อก่อนเราไม่เคยทำแบบนี้ได้ด้วยการใช้เพียงคำสั่ง CSS นะครับแต่ในหลายปีที่ผ่านมานี้ CSS ได้รับการปรับปรุงให้มีความสามารถมากขึ้นสามารถอะไรได้หลายอย่างขึ้นมากครับ

ข้อดีของการใช้ CSS ในการทำเอนนิเมทคือ
1. มันใช้งานง่ายไม่ต้องลงเครื่องมืออะไรเพิ่มเขียนแล้วสามารถแสดงผลใน browser ได้ทันที
2. มันทำงานได้รวดเร็วไม่ทำให้เว็บไซต์เราหน่วงหรือช้า

พูดแต่ข้อดีแล้วข้อเสียล่ะ
1. มันต้องเขียนเยอะ ต้องใช้หลายคำสั่งกว่าจะทำอะไรให้ขยับสักอย่างนึงช่างยากเย็น

อ้าวมันเป็นก็ใช้งานลำบากสิ อยากจะบอกว่าไม่ลำบากแล้วครับเพราะตอนนี้เรามี Animate.css มาช่วยให้งานเราง่ายขึ้นมากไม่ต้องเขียน CSS เองแค่ใส่ class ที่ต้องการจากนั้นก็สามารถสร้างเอนนิเมทได้ทันทีเริ่มต้นด้วย


<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>


เพิ่มลิงก์ไปยังไฟล์ animate.css ให้กับเว็บไซต์เราก่อนจากนั้นเราก็สามารถสร้าง animate ได้ง่ายๆเพียงแค่ใส่ชื่อ class ลงไปในวัตถุที่ต้องการเช่น


<h1 class="animated infinite bounce">เด้ง</h1>


ถ้าเราลองนำโค้ดนี้ไปเปิดใน browser ดูจะพบกว่ามันเด้งไม่หยุดเลยล่ะครับดังตัวอย่างด้านล่าง



สำหรับ class ที่เราใส่ไป จะเป็นตัวกำหนดเอนนิเมทของวัตถุนันๆนะครับ ในกรณีนี้เราใส่ class

- animate หมายความว่าต้องการให้วัตถุนี้ขยับ
- infinite ขยับไม่ต้องหยุดนะ
- bounce ขยับแบบไหน อันนี้ขยับแบบเด้งๆ

สำหรับบทความนี้ก็จบแค่นี้ครับ ลองนำไปเล่นกันดูนะครับ ใช้ถูกตำแหน่งเว็บไซต์น่าสนใจขึ้นเยอะครับ


เลื่อนขึ้นด้านบน