ทำ css animate ด้วย animate.css


🕑 14 ก.ค. 2561
ทำ css animate ด้วย animate.css

การทำ 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

ส่วนตัวอย่างการใช้งานอื่น ๆ สามารถเข้าไปดูใน github ของ animate.css ได้เลย  https://github.com/daneden/animate.css

 

 

เทพควิช-lnwquiz