ทำ css animate ด้วย animate.css

🕑 14 ก.ค. 2561

การทำ css animate บนเว็บจะไม่ใช่เรื่องที่ยากอีกต่อไปถ้ามาลองใช้ framework animate.css ซึ่งมันจะง่ายขนาดไหนมาดูกัน

การทำ animate บนเว็บในช่วง 5 - 10 ปีก่อนนิยมใช้ flash แต่ปัจจุบัน flash เริ่มลดความนิยมลงเพาะทำให้เว็บช้ากินทรัพยากรเครื่องเยอะ และเมื่อมาถึงยุคที่เว็บต้องการความสวยงาม มีลูกเล่น และต้องการให้โหลดหน้าาเว็บ ดังนั้น css จึงตอบโจย์และปัจจุบัน css พัฒนามาเป็น css version 3 หรือ css3 นั่นเอง

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

ข้อเสียของการเขียน css เพื่อทำ animate เอง

1.ต้องมีความรู้การเขียน css พอสมควร
2.มันต้องเขียนเยอะหลายบรรทัด คำสั่ง css บางคำสั่งใช้ได้เฉพาะกับ browser บางตัวเท่านั้น ทำให้เกิดความวุ่นวายในการเขียนและการทดสอบ css ที่เราเขียนเอง

ตัวอย่างการเขียน css animate ทำ bounce animation เองโค้ดจะยาวแบบนี้ทำให้เสียเวลาเขียนมาก

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

ลิงค์ตัวอย่าง code ฉบับเต็ม และผลลัพธ์การแสดงผล https://codepen.io/webmantras/pen/azWJOB

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

animate.css ทำให้การให้เราทำ animate ขึ้นมาโดยที่ไม่ต้องเขียน CSS เองแค่ใส่ชื่อ class ที่ต้องการจากนั้นก็สามารถสร้าง animate ที่ต้องการได้ทันที

วิธีการใช้งาน animate.css

1.เพิ่ม link ของ animate.css เข้าไปใน html ในตัวอย่างจะใส่ไว้ใน <head>

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

2.ระบุชื่อ class "animated" และชื่อ clalss animation รูปแบบที่ต้องการลงไปใน html tags เช่น

<h1 class="animated infinite bounce">Example</h1>

หรือใช้ jquery add ชื่อ class ไปก็ได้น่ะ

<script>
$('#yourElement').addClass('animated bounceOutLeft');
</script>

หากใครต้องการเรียกใช้ animate.css แบบ jquery plugin ก็ทำได้ตามตัวอย่างด้านลางครับ

<script>
//การสร้าง aniamte.css เป็น plugin jquery
.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      };

      for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement('div'));

    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);

      if (typeof callback === 'function') callback();
    });

    return this;
  },
});


//ตัวอย่างการใช้งาน คำสั่ง 
$('#yourElement').animateCss('bounce');
or;
$('#yourElement').animateCss('bounce', function() {
  // Do somthing after animation
});
</script>

ในตารางด้านล่างคือ animate ทั้งที่เราสามารถใช้ได้

Class Name
`bounce`	`flash`	`pulse`	`rubberBand`
`shake`	`headShake`	`swing`	`tada`
`wobble`	`jello`	`bounceIn`	`bounceInDown`
`bounceInLeft`	`bounceInRight`	`bounceInUp`	`bounceOut`
`bounceOutDown`	`bounceOutLeft`	`bounceOutRight`	`bounceOutUp`
`fadeIn`	`fadeInDown`	`fadeInDownBig`	`fadeInLeft`
`fadeInLeftBig`	`fadeInRight`	`fadeInRightBig`	`fadeInUp`
`fadeInUpBig`	`fadeOut`	`fadeOutDown`	`fadeOutDownBig`
`fadeOutLeft`	`fadeOutLeftBig`	`fadeOutRight`	`fadeOutRightBig`
`fadeOutUp`	`fadeOutUpBig`	`flipInX`	`flipInY`
`flipOutX`	`flipOutY`	`lightSpeedIn`	`lightSpeedOut`
`rotateIn`	`rotateInDownLeft`	`rotateInDownRight`	`rotateInUpLeft`
`rotateInUpRight`	`rotateOut`	`rotateOutDownLeft`	`rotateOutDownRight`
`rotateOutUpLeft`	`rotateOutUpRight`	`hinge`	`jackInTheBox`
`rollIn`	`rollOut`	`zoomIn`	`zoomInDown`
`zoomInLeft`	`zoomInRight`	`zoomInUp`	`zoomOut`
`zoomOutDown`	`zoomOutLeft`	`zoomOutRight`	`zoomOutUp`
`slideInDown`	`slideInLeft`	`slideInRight`	`slideInUp`
`slideOutDown`	`slideOutLeft`	`slideOutRight`	`slideOutUp`