สั่งซื้อเทมเพลตคลิปวิดีโอนี้เป็น EP.18 ของซีรีส์สอน Page Builder CK (2022) ซึ่งแนะนำการใช้งานฟังก์ชัน Animations เพื่อเพิ่มลูกเล่นการเคลื่อนไหวให้กับเนื้อหาบนเว็บไซต์ ทำให้หน้าเว็บดูน่าสนใจและไม่หยุดนิ่งจนเกินไปครับ [00:46]
สรุปเนื้อหาและเทคนิคการใช้งานจากคลิปได้ดังนี้:
1. Animations คืออะไร? [01:40]
- คือการสร้างการเคลื่อนไหว (Movement) เล็กๆ น้อยๆ ให้กับคอลัมน์หรือแถว เมื่อผู้ใช้งานเลื่อนหน้าจอมาถึงตำแหน่งนั้นๆ เช่น การเลื่อนจากซ้ายไปขวา หรือการค่อยๆ ปรากฏขึ้น (Fade in) [01:56]
2. ตำแหน่งที่สามารถใส่ Animation ได้ [04:03]
ใน Page Builder CK เราสามารถกำหนด Animation ได้ 2 ระดับหลักๆ คือ:
- ระดับแถว (Row): การเคลื่อนไหวจะเกิดขึ้นพร้อมกันทั้งแถว [08:01]
- ระดับคอลัมน์ (Column): สามารถแยกการเคลื่อนไหวของแต่ละคอลัมน์ภายในแถวเดียวกันได้ (เช่น รูปภาพเลื่อนจากซ้าย ข้อความเลื่อนจากขวา) [04:15] หมายเหตุ: ตัว Element ย่อยๆ (เช่น ข้อความเดี่ยวๆ) จะไม่สามารถตั้งค่า Animation แยกเองได้ ต้องตั้งที่ระดับคอลัมน์หรือแถวเท่านั้น [10:13]
3. การตั้งค่าต่างๆ ในเมนู Animation [04:24]
- Fade & Move: กำหนดให้มีการจางปรากฏพร้อมกับการเคลื่อนที่ [04:51]
- Direction: เลือกทิศทางการเคลื่อนที่ เช่น Left to Right (ซ้ายไปขวา) หรือ Top to Bottom (บนลงล่าง) [05:12]
- Timing / Delay: ปรับความช้า-เร็ว หรือกำหนดเวลาหน่วงก่อนที่แอนิเมชั่นจะเริ่มทำงาน (เช่น ตั้งค่า 0.5 วินาที เพื่อให้ค่อยๆ แสดงผล) [07:21]
- Scale: ลูกเล่นการขยายขนาด (ซูม) จากเล็กไปใหญ่ [05:26]
- Replay: หากเลือกเป็น Yes แอนิเมชั่นจะทำงานซ้ำทุกครั้งที่ผู้ใช้เลื่อนหน้าจอกลับมาดูตำแหน่งเดิม [05:47]
4. เทคนิคการใช้งานให้สวยงาม [08:39]
- ผู้สอนแนะนำว่าไม่ควรใส่ Animation ที่ทับซ้อนกันมากเกินไป (เช่น ใส่ทั้ง Row และ Column พร้อมกัน) เพราะอาจจะดูรกและไม่สบายตา [08:44]
- การเลือกทิศทางที่สวนทางกัน (เช่น รูปจากซ้าย ข้อความจากขวา) จะช่วยสร้างสมดุลทางสายตาได้ดี [06:31]
การใช้ Animation อย่างพอเหมาะจะช่วยยกระดับให้เว็บไซต์ของคุณดูเป็นมืออาชีพและมีปฏิสัมพันธ์กับผู้ใช้งานได้ดียิ่งขึ้นครับ [10:28]
