ศิลป์การเล่าเรื่องอาจเริ่มนานกว่าที่โฮโม เซเปียนส์จะพูดได้ มันวิวัฒนาการกับเรา และปรับตัวเข้ากับเครื่องมือที่มี เรื่องราวที่เคยเล่าและถ่ายทอดรุ่นต่อรุ่นด้วยปาก ปรับตัวผ่านความเป็นธรรมชาติจากหนังสือมือเขียน การพิมพ์มาส ผ่านการประมวลผลคำดิจิทัล และเมื่อเร็วๆ นี้ อินเทอร์เน็ต จากมุมมองวิวัฒนาการมนุษย์ รู้สึกเหมือนเรายังไม่ได้ใช้ศักยภาพเต็มที่ของเทคโนโลยีที่มีอยู่ اليوم แม้วิดีโอเริ่มการครองโลกเสมือนจริง ส่วนใหญ่ของเนื้อหาบนเว็บยังคงเป็นข้อความ
เนื้อหาเว็บสมัยใหม่ควรเป็น interactive และรวมสื่อหลากหลายไปกับข้อความธรรมดาที่ดี บางเครื่องมือช่วยให้เรายกระดับการเล่าเรื่องขึ้นไปอีกหลายระดับ หากคุณเป็นผู้ใช้ WordPress คุณสามารถใช้ปลั๊กอิน Animate It! เพื่อเพิ่ม CSS3 animations ที่โค้ลลงในเนื้อหา
มีความเป็นไปได้อะไรบ้าง?
ร่วมกับ HTML5, CSS3 เป็นย่อหน้าที่เกี่ยวข้องกับการออกแบบเว็บสมัยใหม่ ในข้อความสรุป CSS เป็นคอมโพเนนต์เว็บที่ให้ผู้ใช้ควบคุมลักษณะหน้าเว็บ เช่น เลย์เอาต์ ตำแหน่ง ฟอนต์ สี ฯลฯ รุ่นล่าสุด CSS3 ฉลาดพอที่ให้ผู้ใช้สร้างภาพและแอนิเมชันด้วยโค้ด
โชคดีที่คุณไม่ต้องเป็นโค้ดเดอร์เพื่อใช้ CSS3 บนเว็บ WordPress ปลั๊กอิน Animate It! ให้คุณใช้ CSS3 animations กับ Posts, Widgets และ Pages ด้วยการคลิกปุ่มในเอดิเตอร์ นอกจากนี้ ผู้ใช้ควบคุม triggers (ทริกเกอร์) ได้ เช่น ใช้แอนิเมชันเมื่อ scroll, click, hover และเพิ่ม scroll offset ต่างกันบนบล็อกแอนิเมชันแต่ละบล็อก ปลั๊กอินยังมาพร้อมฟีเจอร์มากมาย เช่น:
- 50+ Entry, Exit, และ Attention Seeker Animations
- มีฟีเจอร์ delay และ duration control ในแอนิเมชัน เพื่อสร้างลำดับแอนิเมชันที่ดี
- อนุญาตให้ใช้แอนิเมชันแบบวนลูปไม่มีที่สิ้นสุด หรือจำนวนครั้งคงที่
- ตัวเลือกเพิ่ม custom CSS classes ให้บล็อกแอนิเมชันแต่ละบล็อก
- ตัวเลือกเปิด/ปิดแอนิเมชันบนสมาร์ทโฟนและแท็บเล็ต
ทำอะไรได้บ้างกับปลั๊กอิน Animate It! ? เพิ่ม interactivities เรียบง่ายในบทความ สร้างหน้าขายที่ดึงดูด ลึกซึ้งอารมณ์นิยาย หรือสร้างการนำเสนอธุรกิจที่ทรงพลัง ก็ได้ เพียงจำไว้อย่าเกินไป เพราะโจมตีผู้เยี่ยมชมด้วยแอนิเมชันไม่จำกัด ไม่ใช่วิธีดีที่สุดได้ผู้อ่านที่ซื่อสัตย์
เริ่มต้นกับ Animate It!
หลังติดตั้งและเปิดใช้งานปลั๊กอิน คุณจะหาปุ่มเพิ่มแอนิเมชันใน "WordPress Editor" ปุ่มนี้แสดงเฉพาะในโหมด visual (visual mode) แต่หากเรียนรู้คำสั่งแล้ว สามารถแทรกโค้ดจากโหมด plain text ได้ (รายละเอียดเพิ่มเติมภายหลัง)
หลังกดปุ่ม จะได้หน้าต่างตัวเลือก มี 3 แท็บ ปรับแต่งแอนิเมชัน แท็บแรกคือ "Entry" นี่คือที่เพิ่มแอนิเมชันที่จะเข้าหน้าจอภายใต้เงื่อนไขบางอย่าง 4 ตัวเลือก dropdown ช่วยปรับเอฟเฟกต์แอนิเมชัน
- Animation เลือกชนิดแอนิเมชันที่ต้องการ
- Delay ปรับเวลาก่อนแอนิเมชันเริ่ม
- Duration ระยะเวลาที่แอนิเมชันเล่นจากต้นจนจบ ตัวเลขมาก = แอนิเมชันช้าลง
- Timing สัดส่วนของแอนิเมชันที่เล่นในเวลาเดียวกัน เช่น "easeIn" จะเล่นช้าตอนต้น และเร็วขึ้นท้าย
เช็คการรวมเอฟเฟกต์ได้โดยกดปุ่ม "Animate It!" หากผลลัพธ์ชอบ กด "Insert" เพื่อใช้ในเนื้อหา
แท็บ "Exit" คล้าย Entry แต่อยู่ที่เพิ่มแอนิเมชันที่จะออกจากหน้าจอ รวมทั้งคู่ คุณเพิ่มออบเจ็กต์ที่ปรากฏบนหน้าจอแล้วหายไปได้
แท็บ "Options" ควบคุมการตั้งค่าทั่วไปของแอนิเมชัน ตั้งให้เล่นวนลูปหรือครั้งเดียว เก็บสถานะสุดท้ายของอิลิเมนต์ เพิ่มโค้ด CSS แบบกำหนดเอง และตั้ง trigger เริ่มแอนิเมชัน โดยเฉพาะ setting "Animate On" - เลือก Scroll ตัวอย่าง แอนิเมชันจะเริ่มก็ต่อเมื่อพื้นที่มองเห็นได้แล้ว
เพิ่มเนื้อหาของคุณ
หลังกด "Insert" จะเห็น shortcodes หลายบรรทัดเพิ่มในพื้นที่เนื้อหา Shortcodes เหล่านี้ควบคุมแอนิเมชัน และเนื่องจากเป็นโค้ดกับค่า คุณอาจเพิ่มโค้ดด้วยมือได้ หากเก่งโค้ดและอยากทำ แต่อื่นควรใช้ปุ่ม Animate It! ปกติ
คุณจะเห็นข้อความ "Please add your content in this area." นี่คือที่คุณเพิ่มสิ่งที่อยากให้แอนิเมท อาจเป็นข้อความ รูปภาพ ไอคอน โลโก้ เสียง วิดีโอ หรือแม้แต่ shortcodes อื่น ผมลองเพิ่ม typed-effect shortcode จาก Typed Js plugin ผลลัพธ์ดี
หากมีสิ่งหนึ่งที่พูดได้เกี่ยวกับการใช้ปลั๊กอิน Animate It! จะเป็น "Experiment!" (ลองทดลอง!) เล่นกับมัน ลองผสมผสานต่างๆ เพื่อผลลัพธ์ที่ต้องการ มันสนุก และนี่คือผลลัพธ์ที่ผมได้ในไม่กี่นาที ผมรวม Animate It! กับ Typed Js plugin
คุณคิดว่าเวลาเพิ่ม interactive elements ในเนื้อหาเว็บแล้วไหม? วางแผนลองปลั๊กอินไหม? ใช้ปลั๊กอินอื่นสำหรับแอนิเมชันไหม? แชร์ในคอมเมนต์ด้านล่างได้เลย
