ศิลปะการเล่าเรื่องอาจเริ่มต้นนานแล้วก่อนที่ Homo sapiens จะพูดได้ มันพัฒนาไปพร้อมกับเราและปรับให้เข้ากับเครื่องมือที่มีอยู่ เรื่องราวที่เคยถูกบอกเล่าและส่งต่อจากรุ่นสู่รุ่น ถ่ายทอดวิวัฒนาการจากหนังสือที่เขียนด้วยลายมือ การพิมพ์จำนวนมาก การประมวลผลคำแบบดิจิทัล และเมื่อเร็วๆ นี้ทางอินเทอร์เน็ต จากมุมมองของวิวัฒนาการของมนุษย์ รู้สึกเหมือนว่าเรายังไม่ได้ใช้ศักยภาพของเทคโนโลยีที่มีอยู่ทั้งหมดที่มีอยู่ในปัจจุบัน ในขณะที่วิดีโอได้เริ่มต้นแคมเปญครอบงำโลกเสมือนจริงแล้ว เนื้อหาส่วนใหญ่ของเว็บยังคงเป็นข้อความ
เนื้อหาเว็บสมัยใหม่ควรเป็นแบบโต้ตอบและรวมสื่อต่างๆ เข้ากับข้อความธรรมดาที่ดี เครื่องมือบางอย่างสามารถช่วยให้เรายกระดับการเล่าเรื่องของเราได้ และหากคุณเป็นผู้ใช้ WordPress คุณสามารถใช้ Animate It! ปลั๊กอินเพื่อเพิ่มแอนิเมชั่น CSS3 ที่ยอดเยี่ยมให้กับเนื้อหาของคุณ
ความเป็นไปได้คืออะไร
นอกจาก HTML5 แล้ว CSS3 ยังเป็นคำย่อที่เกี่ยวข้องกับการออกแบบเว็บสมัยใหม่ โดยสรุป CSS เป็นองค์ประกอบเว็บที่ช่วยให้ผู้ใช้สามารถควบคุมลักษณะที่ปรากฏของเว็บเพจ เช่น เลย์เอาต์ ตำแหน่ง ฟอนต์ สี ฯลฯ ชาติล่าสุด CSS3 นั้นฉลาดพอที่จะให้ผู้ใช้สร้างภาพและแอนิเมชั่นโดยใช้ รหัส.
โชคดีที่คุณไม่จำเป็นต้องเป็นผู้เขียนโค้ดเพื่อใช้ CSS3 บนไซต์ WordPress ของคุณ แอนิเมชั่นมัน! ปลั๊กอินช่วยให้คุณใช้แอนิเมชั่น CSS3 กับโพสต์ วิดเจ็ต และเพจได้ด้วยการคลิกปุ่มในตัวแก้ไข นอกจากนี้ ผู้ใช้สามารถควบคุมทริกเกอร์ ตัวอย่างเช่น สามารถใช้แอนิเมชั่นในการเลื่อน คลิก และโฮเวอร์ และเพิ่มออฟเซ็ตการเลื่อนที่แตกต่างกันในแต่ละบล็อกแอนิเมชั่น ปลั๊กอินยังมาพร้อมกับคุณสมบัติมากมาย เช่น:
- ภาพเคลื่อนไหวการเข้าออกและการเรียกร้องความสนใจมากกว่า 50 รายการ
- ให้คุณสมบัติการดีเลย์และการควบคุมระยะเวลาในแอนิเมชั่นเพื่อสร้างลำดับแอนิเมชั่นที่สวยงาม
- อนุญาตให้ผู้ใช้ใช้แอนิเมชั่นไม่จำกัดจำนวนครั้งหรือไม่จำกัดจำนวนครั้ง
- ตัวเลือกในการเพิ่มคลาส CSS ที่กำหนดเองให้กับบล็อกแอนิเมชั่นแต่ละรายการ
- ตัวเลือกในการเปิดหรือปิดภาพเคลื่อนไหวบนสมาร์ทโฟนและแท็บเล็ต
คุณสามารถทำอะไรกับ Animate It! เสียบเข้าไป? คุณสามารถเพิ่มการโต้ตอบง่ายๆ ให้กับบทความของคุณ สร้างหน้าขายที่ดึงดูดใจ เพิ่มอารมณ์ให้กับนิยายของคุณ หรือแม้แต่สร้างงานนำเสนอทางธุรกิจที่ทรงพลังได้หากต้องการ เพียงจำไว้ว่าอย่าลงน้ำเนื่องจากการระดมยิงผู้มาเยี่ยมของคุณด้วยแอนิเมชั่นไม่จำกัดไม่ใช่วิธีที่ดีที่สุดในการดึงดูดผู้อ่านที่ภักดี
เริ่มต้นใช้งาน Animate It!
หลังจากติดตั้งและเปิดใช้งานปลั๊กอินแล้ว คุณจะพบปุ่มสำหรับเพิ่มภาพเคลื่อนไหวใน “WordPress’ Editor” ปุ่มนี้จะแสดงเฉพาะในโหมดภาพ แต่หากคุณได้เรียนรู้คำสั่งแล้ว ก็สามารถแทรกโค้ดจากโหมดข้อความธรรมดาได้ (จะเพิ่มเติมในภายหลัง)
หลังจากกดปุ่ม คุณจะได้รับหน้าต่างตัวเลือก มีสามแท็บให้คุณปรับแต่งแอนิเมชั่นได้ แท็บแรกคือ "รายการ" นี่คือที่สำหรับเพิ่มแอนิเมชั่นที่จะเข้าสู่หน้าจอตามเงื่อนไขบางประการ สี่ตัวเลือกแบบเลื่อนลงจะช่วยคุณปรับเอฟเฟกต์แอนิเมชั่น
- แอนิเมชั่น เป็นที่สำหรับเลือกประเภทของแอนิเมชั่นที่คุณต้องการ
- ล่าช้า จะช่วยคุณปรับเวลาก่อนเริ่มแอนิเมชั่น
- ระยะเวลา คือระยะเวลาที่ภาพเคลื่อนไหวจะเล่นตั้งแต่ต้นจนจบ ยิ่งตัวเลขมาก ภาพเคลื่อนไหวก็จะยิ่งช้าลง
- ระยะเวลา คือสัดส่วนของแอนิเมชั่นที่จะเล่นในแต่ละครั้ง ตัวอย่างเช่น เอฟเฟกต์ "easeIn" จะเล่นภาพเคลื่อนไหวช้าลงในตอนเริ่มต้นและเล่นจนจบเร็วขึ้น
คุณสามารถตรวจสอบการผสมผสานเอฟเฟกต์โดยการเล่นโดยใช้ "Animate It!" ปุ่ม. หากผลลัพธ์เป็นที่ต้องการ คุณสามารถกดปุ่ม "แทรก" เพื่อใช้ในเนื้อหาของคุณ
แท็บ "ออก" คล้ายกับรายการมากหรือน้อย แต่เพื่อเพิ่มภาพเคลื่อนไหวที่จะออกจากหน้าจอ เมื่อรวมทั้งสองเข้าด้วยกัน คุณสามารถเพิ่มวัตถุที่จะปรากฏบนหน้าจอแล้วหายไปได้
แท็บ "ตัวเลือก" คือที่ที่คุณควบคุมการตั้งค่าทั่วไปของภาพเคลื่อนไหว ที่นี่ คุณสามารถตั้งค่าแอนิเมชั่นให้เล่นแบบวนซ้ำหรือเพียงครั้งเดียว รักษาสถานะสุดท้ายขององค์ประกอบ เพิ่มโค้ด CSS ที่กำหนดเอง และตั้งค่าทริกเกอร์ที่จะเริ่มต้นแอนิเมชั่น โดยเฉพาะเกี่ยวกับทริกเกอร์ – การตั้งค่า “เปิดการเคลื่อนไหว” คุณสามารถเลือกเลื่อนได้ เป็นต้น และภาพเคลื่อนไหวจะเริ่มขึ้นก็ต่อเมื่อพื้นที่นั้นปรากฏบนหน้าจอแล้วเท่านั้น
การเพิ่มเนื้อหาของคุณ
หลังจากกดปุ่ม "แทรก" คุณจะเห็นรหัสย่อสองสามบรรทัดเพิ่มลงในพื้นที่เนื้อหาของคุณ รหัสย่อเหล่านี้เป็นรหัสที่จะควบคุมแอนิเมชั่น และเนื่องจากเป็นเพียงรหัสที่มีค่า คุณสามารถเพิ่มรหัสด้วยตนเองได้หากคุณคุ้นเคยกับรหัสและต้องการ อย่างไรก็ตาม คนอื่นๆ ควรใช้ Animate It! ปุ่ม.
คุณจะเห็นบรรทัดข้อความว่า “โปรดเพิ่มเนื้อหาของคุณในพื้นที่นี้ ” นี่คือที่ที่คุณสามารถเพิ่มรายการที่คุณต้องการทำให้เคลื่อนไหวได้ อาจเป็นข้อความ รูปภาพ ไอคอน โลโก้ ไฟล์เสียง วิดีโอ หรือแม้แต่รหัสย่ออื่นๆ ฉันพยายามเพิ่มรหัสย่อเอฟเฟกต์ที่สร้างขึ้นโดยใช้ปลั๊กอิน Typed Js และผลลัพธ์ก็ยอดเยี่ยม
หากมีสิ่งหนึ่งที่ฉันสามารถพูดได้เกี่ยวกับการใช้ Animate It! ปลั๊กอิน มันจะเป็น "การทดลอง!" เล่นกับมันและลองใช้ชุดค่าผสมต่าง ๆ เพื่อให้ได้ผลลัพธ์ที่คุณต้องการ มันสนุก. และนี่คือผลลัพธ์ที่เกิดขึ้นภายในเวลาไม่ถึงหนึ่งนาที ฉันรวม Animate It! ปลั๊กอินพร้อมปลั๊กอิน Typed Js
คุณคิดว่าถึงเวลาเพิ่มองค์ประกอบแบบอินเทอร์แอกทีฟให้กับเนื้อหาเว็บของคุณแล้วหรือยัง คุณวางแผนที่จะลองใช้ปลั๊กอินหรือไม่? คุณใช้ปลั๊กอินที่แตกต่างกันสำหรับแอนิเมชั่นหรือไม่? กรุณาแบ่งปันโดยใช้ความคิดเห็นด้านล่าง
