การสร้าง Animation ง่ายๆ ด้วย CSS Transitions และ JavaScript

การสร้าง Animation ง่ายๆ ด้วย CSS Transitions และ JavaScript

ในบทที่ผ่านมา เราได้เรียนรู้เกี่ยวกับการใช้ JavaScript เพื่อเปลี่ยนแปลงเนื้อหาและสไตล์ของเว็บไซต์แบบไดนามิก ซึ่งเป็นพื้นฐานสำคัญในการสร้าง interactive web applications ในบทนี้ เราจะต่อยอดความรู้เดิมด้วยการเรียนรู้วิธีสร้าง animation ง่ายๆ เพื่อเพิ่มความน่าสนใจและดึงดูดผู้ใช้ให้เว็บไซต์ของเรามากยิ่งขึ้น โดยเราจะเน้นไปที่การใช้ CSS Transitions ร่วมกับ JavaScript เพื่อสร้าง animation ที่ราบรื่นและมีประสิทธิภาพ

พื้นฐานของ CSS Transitions

CSS Transitions เป็นคุณสมบัติที่ช่วยให้เราสามารถเปลี่ยนค่าของ CSS property อย่างค่อยเป็นค่อยไป (animated) แทนที่จะเปลี่ยนค่าทันทีทันใด ทำให้เกิดเป็น animation ที่ดูเป็นธรรมชาติและสวยงาม การใช้งาน CSS Transitions นั้นง่ายมาก เพียงแค่เรากำหนด property ที่ต้องการ animate, ระยะเวลาในการ animate, และฟังก์ชัน easing (ซึ่งกำหนดความเร็วในการเปลี่ยนแปลง) ให้กับ element ที่ต้องการ

รูปแบบการใช้งาน CSS Transitions:

transition: property duration timing-function delay;

• property: ชื่อของ CSS property ที่ต้องการ animate (เช่น opacity, width, height, transform)
• duration: ระยะเวลาในการ animate (หน่วยเป็นวินาที (s) หรือ มิลลิวินาที (ms))
• timing-function: ฟังก์ชัน easing ที่กำหนดความเร็วในการเปลี่ยนแปลง (เช่น linear, ease, ease-in, ease-out, ease-in-out)
• delay: ระยะเวลาหน่วงก่อนเริ่ม animate (หน่วยเป็นวินาที (s) หรือ มิลลิวินาที (ms)) (optional)

ตัวอย่าง:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.5s ease-in-out, background-color 0.3s linear; /* animate width และ background-color */
}

.box:hover {
  width: 200px;
  background-color: blue;
}

ในตัวอย่างนี้ เมื่อเรา hover เมาส์เหนือ element ที่มี class .box ความกว้างของ element จะค่อยๆ เปลี่ยนจาก 100px เป็น 200px ในระยะเวลา 0.5 วินาที โดยใช้ฟังก์ชัน easing แบบ ease-in-out และสีพื้นหลังจะเปลี่ยนจากสีแดงเป็นสีน้ำเงินในระยะเวลา 0.3 วินาที โดยใช้ฟังก์ชัน easing แบบ linear

เหตุผลเชิงออกแบบ: การใช้ CSS Transitions ช่วยให้เราสามารถสร้าง animation ที่มีประสิทธิภาพได้ เนื่องจาก browser สามารถ optimize การ animate CSS property ได้ดีกว่าการ animate ด้วย JavaScript นอกจากนี้ CSS Transitions ยังช่วยให้โค้ดของเราสะอาดและอ่านง่ายขึ้น

การใช้ JavaScript เพื่อควบคุม Transitions

ถึงแม้ว่า CSS Transitions จะสามารถสร้าง animation ได้ด้วยตัวเอง แต่บางครั้งเราก็ต้องการควบคุมการทำงานของ Transitions ด้วย JavaScript เพื่อให้สามารถสร้าง animation ที่ซับซ้อนและตอบสนองต่อเหตุการณ์ต่างๆ ได้ดียิ่งขึ้น

เราสามารถใช้ JavaScript เพื่อเพิ่ม, ลบ, หรือแก้ไข class ของ element ที่มี CSS Transitions กำหนดไว้ได้ เมื่อ class ของ element เปลี่ยนแปลง Transitions ก็จะทำงานตามที่กำหนดไว้

ตัวอย่าง:

<button id="myButton">Click Me</button>
<div id="myBox" class="box"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

.box.hidden {
  opacity: 0;
}
</style>

<script>
const button = document.getElementById('myButton');
const box = document.getElementById('myBox');

button.addEventListener('click', () => {
  box.classList.toggle('hidden');
});
</script>

ในตัวอย่างนี้ เมื่อเราคลิกปุ่ม "Click Me" class .hidden จะถูกเพิ่มหรือลบออกจาก element ที่มี id myBox ทำให้ opacity ของ element เปลี่ยนแปลงอย่างค่อยเป็นค่อยไปในระยะเวลา 0.5 วินาที เกิดเป็น animation fade in/out

เหตุผลเชิงออกแบบ: การใช้ JavaScript เพื่อควบคุม Transitions ช่วยให้เราสามารถสร้าง animation ที่ตอบสนองต่อการกระทำของผู้ใช้ได้ เช่น การแสดง animation เมื่อผู้ใช้คลิกปุ่ม หรือการซ่อน animation เมื่อผู้ใช้เลื่อนหน้าจอ นอกจากนี้ การใช้ JavaScript ยังช่วยให้เราสามารถสร้าง animation ที่ซับซ้อนได้ เช่น การ animate หลาย property พร้อมกัน หรือการ animate ตามลำดับ

การสร้าง Animation แบบง่ายๆ

ต่อไปนี้เป็นตัวอย่างการสร้าง animation แบบง่ายๆ ที่เราสามารถนำไปประยุกต์ใช้กับเว็บไซต์ของเราได้

Fade In/Out

Animation fade in/out เป็น animation ที่ทำให้ element ค่อยๆ ปรากฏขึ้นหรือหายไป เราสามารถสร้าง animation นี้ได้โดยการ animate property opacity

<div id="fadeInOutBox" class="box"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: opacity 1s ease-in-out;
  opacity: 0; /* เริ่มต้นด้วย opacity เป็น 0 */
}

.box.visible {
  opacity: 1; /* เมื่อมี class visible opacity จะเป็น 1 */
}
</style>

<script>
const fadeInOutBox = document.getElementById('fadeInOutBox');

// แสดง element หลังจากโหลดหน้าเว็บ
setTimeout(() => {
  fadeInOutBox.classList.add('visible');
}, 500); // หน่วงเวลา 0.5 วินาที
</script>

ในตัวอย่างนี้ element จะเริ่มต้นด้วย opacity เป็น 0 และหลังจาก 0.5 วินาที class .visible จะถูกเพิ่ม ทำให้ opacity เปลี่ยนเป็น 1 อย่างค่อยเป็นค่อยไป เกิดเป็น animation fade in

Slide In/Out

Animation slide in/out เป็น animation ที่ทำให้ element ค่อยๆ เลื่อนเข้ามาหรือออกจากหน้าจอ เราสามารถสร้าง animation นี้ได้โดยการ animate property transform: translateX() หรือ transform: translateY()

<div id="slideInBox" class="box"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: transform 0.5s ease-in-out;
  transform: translateX(-100%); /* เริ่มต้นโดยเลื่อนไปทางซ้าย 100% ของความกว้าง */
}

.box.visible {
  transform: translateX(0); /* เมื่อมี class visible เลื่อนกลับมาที่ตำแหน่งเดิม */
}
</style>

<script>
const slideInBox = document.getElementById('slideInBox');

// เลื่อน element เข้ามาหลังจากโหลดหน้าเว็บ
setTimeout(() => {
  slideInBox.classList.add('visible');
}, 1000); // หน่วงเวลา 1 วินาที
</script>

ในตัวอย่างนี้ element จะเริ่มต้นโดยเลื่อนไปทางซ้าย 100% ของความกว้าง และหลังจาก 1 วินาที class .visible จะถูกเพิ่ม ทำให้ element เลื่อนกลับมาที่ตำแหน่งเดิมอย่างค่อยเป็นค่อยไป เกิดเป็น animation slide in จากทางซ้าย

แนวปฏิบัติที่ดี:

• ใช้ will-change property: ก่อนที่จะ animate property ใดๆ ให้ใช้ will-change property เพื่อบอก browser ว่าเรากำลังจะ animate property นั้นๆ ซึ่งจะช่วยให้ browser สามารถ optimize การ animate ได้ดียิ่งขึ้น (เช่น will-change: transform;)
• หลีกเลี่ยงการ animate property ที่มีผลต่อ layout: การ animate property ที่มีผลต่อ layout (เช่น width, height, top, left) อาจทำให้ browser ต้องคำนวณ layout ใหม่ทุกครั้งที่มีการ animate ซึ่งจะทำให้ animation ไม่ราบรื่น ควรใช้ transform หรือ opacity แทน
• ใช้ฟังก์ชัน easing ที่เหมาะสม: ฟังก์ชัน easing มีผลต่อความรู้สึกของ animation ควรเลือกใช้ฟังก์ชัน easing ที่เหมาะสมกับ animation ที่เราต้องการสร้าง

สรุป: ในบทนี้ เราได้เรียนรู้วิธีสร้าง animation ง่ายๆ ด้วย CSS Transitions และ JavaScript โดยเราได้เรียนรู้เกี่ยวกับพื้นฐานของ CSS Transitions, การใช้ JavaScript เพื่อควบคุม Transitions, และการสร้าง animation แบบง่ายๆ เช่น fade in/out และ slide in/out การสร้าง animation เป็นส่วนสำคัญในการสร้างเว็บไซต์ที่น่าสนใจและดึงดูดผู้ใช้ หวังว่าความรู้ที่ได้จากบทนี้จะเป็นประโยชน์ในการพัฒนาเว็บไซต์ของคุณ