Categories
HTML & CSS Web Development

ฟรุ๊ง…ฟริ๊ง…กับ CSS Animate


Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

ในความสามารถของ CSS3 นั้น ได้มีการเพิ่มฟังก์ชั่นการทำงาน ของ Animation เข้ามาด้วย แต่โค้ดที่ต้องเขียนก็ยาวซะเหลือเกิน ก็เลยมีคนนำฟังก์ชั่นการเคลื่อนไว้พื้นฐานมารวมไว้เป็นไฟล์ css ที่สามารถนำไปใช้งานได้ง่ายดาย ง่ายยังไงมาชมกัน

CSS Animate สร้างขึ้นโดย Daniel Eden เขาได้รวมการเคลื่อนไหวพื้นฐาน ที่ใช้ในเว็บ มาไว้เป็น ไฟล์ CSS แจกผ่าน GitHub ให้ผู้ที่สนใจสามารถนำไปใช้งานได้ฟรี !!

การใช้งานก็แสนจะง่ายดาย เพียงแค่ อยากได้การเคลื่อนไหวแบบไหน
ให้เข้าไปดูตัวอย่างในเว็บ http://daneden.github.io/animate.css/

screencapture-daneden-github-io-animate-css
แล้วนำชื่อการเคลื่อนไหวจากในช่องที่เลือก มาใส่ใน attribute class ใน tag ที่เราต้องการให้มันเคลื่อนไหวแค่นี้เอง มาดูกันว่าทำยังไง

STEP 1 : ดาวน์โหลด ไฟล์ animate.css มาเก็บไว้ที่ folder เดียวกันกับไฟล์ที่เราเขียน HTML ไว้

STEP 2 : เรียกไฟล์ animate.css เข้ามาในไฟล์ HTML ที่เราต้องการจะทำ Animation โดยใช้ tag <link>
ตัวอย่าง

ให้เอาไว้ในส่วนของ <head>…</head> นะครับ

STEP 3 : ต้องการให้  tag ไหนเล่น Animation ก็ให้ใส่คำสั่ง ตามที่เลือกไว้ในเว็บ http://daneden.github.io/animate.css/ ยกตัวอย่างผมเลือก tada และต้องการให้ <h2> มีการเคลื่อนไหว ผมก็ใส่ “tada animated” ที่ attribute class ของ tag <h2>
ตัวอย่าง

เท่านี้ก็เรียบร้อย…ลองนำไปใช้กับเว็บดูนะครับ ทดลองหลายๆแบบ

สามารถชมตัวอย่าง และดาวน์โหลด CSS Animate ได้ที่ http://daneden.github.io/animate.css/

 

อย่าลืมกดไลค์ และติดตาม ChonAble ได้ที่ https://www.facebook.com/chonable

By Mai

ชื่อใหม่ครับ ชอบการพัฒนาเว็บไซต์ ศึกษาหาข้อมูลอยู่เรื่อย มีความรู้หรือเทคนิคอะไรใหม่ๆ ก็จะมาแบ่งปันกันครับ