วิธีใช้แอนิเมชั่น Lottie บน WordPress

การรวมแอนิเมชั่นเข้ากับเว็บไซต์ WordPress ของคุณเป็นวิธีที่ยอดเยี่ยมในการทำให้หน้าเว็บที่เหนื่อยล้าและทำให้ผู้เยี่ยมชมของคุณมีส่วนร่วมตลอดเวลาบนไซต์ของคุณ วิธีที่ง่ายและมีประสิทธิภาพในการทำเช่นนี้คือการใช้ลอตตี้แอนิเมชั่น: แอนิเมชั่นน้ำหนักเบาคุณภาพสูง

แอนิเมชั่นของ Lottie กำลังได้รับความนิยมเพิ่มขึ้นจากหลายสาเหตุ และหากคุณพร้อมที่จะก้าวเข้าสู่กระแสหลักและทำให้เว็บไซต์ของคุณดูสวยงาม แอนิเมชั่นเหล่านี้อาจเหมาะสำหรับคุณ

มีหลายวิธีในการสร้างแอนิเมชั่นเหล่านี้และเพิ่มลงในไซต์ WordPress ของคุณอย่างราบรื่น

Lottie Animations คืออะไร?

Lottie เป็นไลบรารีสำหรับ Android, iOS, เว็บ และ Windows ที่แสดงภาพเคลื่อนไหว After Effects และอนุญาตให้ส่งออกข้อมูลภาพเคลื่อนไหวเป็นไฟล์ JSON เมื่อเทียบกับประเภทไฟล์รูปภาพทั่วไป กล่าวโดยสรุป พวกเขาสามารถแทนที่เนื้อหาคงที่ด้วยสิ่งที่สนุกและมีส่วนร่วมได้อย่างง่ายดาย

โซลูชันโอเพนซอร์สนี้เปิดตัวครั้งแรกโดยทีมงานที่ AirBnB แต่ได้รับความนิยมอย่างรวดเร็วจากนักออกแบบและแอนิเมเตอร์ในตลาดต่างๆ ข้อดีอย่างหนึ่งของการใช้ลอตตี้แอนิเมชั่นบนเว็บไซต์ WordPress ของคุณคือขนาดไฟล์นั้นเล็กมากเมื่อเทียบกับไฟล์แอนิเมชั่น GIF หรือไฟล์ mp4 นอกจากนี้ รูปแบบแอนิเมชั่นที่ยืดหยุ่นยังช่วยให้เบราว์เซอร์จัดการการเรนเดอร์ได้

ความเป็นไปได้มากมายสำหรับการใช้แอนิเมชั่นลอตตี้เป็นเหตุผลหนึ่งที่พวกเขาได้รับความนิยม คุณสามารถใช้แอนิเมชั่นลอตตี้เป็นส่วนหัว ปุ่มกด องค์ประกอบกราฟิกที่สะดุดตา และอื่นๆ แบบเคลื่อนไหวได้ คุณยังสามารถตั้งค่าให้แอนิเมชั่นทริกเกอร์เมื่อผู้เยี่ยมชมเลื่อน โฮเวอร์ หรือคลิกบนหน้าเว็บ ความเก่งกาจและการใช้งานที่ง่ายสำหรับทั้งเว็บไซต์ B2C และ B2B ทำให้พวกเขาเป็นวิธีที่เปลี่ยนเกมในการปรับปรุงคุณภาพและรูปลักษณ์โดยรวมของการออกแบบเว็บของคุณ

การสร้างแอนิเมชั่น Lottie

เมื่อพิจารณาว่าจะเพิ่มแอนิเมชั่นล็อตตี้ลงในไซต์ของคุณ ก่อนอื่นคุณต้องตัดสินใจว่าจะทำสต็อกหรือกำหนดวิธีการเอง แต่ละอย่างมีข้อดีและข้อเสีย ดังนั้นควรพิจารณาทั้งสองตัวเลือกก่อนตัดสินใจ

สำหรับแอนิเมชั่นทุกประเภท ยิ่งน้อยก็ยิ่งมาก เมื่อรวมองค์ประกอบที่เป็นภาพเคลื่อนไหวเข้ากับการออกแบบเว็บไซต์ใหม่ ให้พิจารณาว่าแอนิเมชั่นนั้นมีบทบาทอย่างไรในการเดินทางของลูกค้า

แอนิเมชั่น Lottie แบบกำหนดเอง

หากคุณกำลังมองหาลอตตี้แอนิเมชั่นแบบกำหนดเองสำหรับเว็บไซต์ของคุณ คุณจะต้องทำงานกับแอนิเมเตอร์หรือนักออกแบบที่เชี่ยวชาญใน Adobe After Effects และคุ้นเคยกับแอนิเมชั่นประเภทนี้

แอนิเมชั่นล็อตตี้จำนวนมากใช้รูปแบบภาพประกอบ ดังนั้น คุณจะต้องตัดสินใจว่าสิ่งนี้เหมาะกับการสร้างแบรนด์และสไตล์ของเว็บไซต์หรือไม่ก่อนที่จะดำเนินการต่อไป เมื่อคุณตัดสินใจเกี่ยวกับองค์ประกอบกราฟิกและเอฟเฟกต์แอนิเมชั่นแล้ว อนิเมเตอร์จะต้องสร้างแอนิเมชั่นแบบกำหนดเองใน Adobe After Effects และส่งออกเป็นแอนิเมชั่นล็อตตี้โดยใช้ส่วนขยาย After Effects สิ่งนี้จะแสดงแอนิเมชั่นคุณภาพสูงที่สามารถนำไปใช้กับไซต์ของคุณได้อย่างง่ายดาย

เหตุผลหนึ่งที่ทำให้ลอตตี้แอนิเมชั่นมีคุณภาพสูงก็คือกระบวนการสร้างไม่จำเป็นต้องให้นักพัฒนาหรือวิศวกรสร้างแอนิเมชั่นของนักออกแบบขึ้นใหม่ในรูปแบบเว็บ นำเสนอโซลูชันพร้อมใช้ที่ทำให้การใช้งานแอนิเมชั่นง่ายขึ้นกว่าที่เคย

แอนิเมชั่น Lottie หุ้น

แอนิเมชั่นลอตเตอรี่หุ้นเป็นตัวเลือกที่ดีหากคุณต้องการเร่งรัดการออกแบบใหม่ของคุณ คุณสามารถค้นหาแอนิเมชั่นล็อตตี้หุ้นที่มีอยู่ได้ และหากต้องการ ให้ปรับแต่งให้เหมาะกับแบรนด์ของคุณ

Lottie Files เป็นเว็บไซต์สต็อกที่คุณสามารถค้นหาแอนิเมชั่นล็อตตี้ทั้งแบบฟรีและมีค่าใช้จ่ายได้จำนวนมาก ไซต์ยังมีเครื่องมือแก้ไขซึ่งคุณสามารถแก้ไขสีของแอนิเมชั่นก่อนดาวน์โหลด หากคุณต้องการเปลี่ยนสีจำนวนมากในแอนิเมชั่น นักสร้างแอนิเมชั่นหรือนักออกแบบที่มีทักษะก็สามารถใช้ Adobe After Effects เพื่อทำการเปลี่ยนแปลงเหล่านั้นได้อย่างมีประสิทธิภาพมากขึ้นและส่งออกแอนิเมชั่น

หากคุณต้องการใช้แอนิเมชั่นจำนวนมากบนไซต์ หรือถ้าคุณมีความสวยงามของไซต์ที่เฉพาะเจาะจง อาจเป็นเรื่องยากที่จะหาตัวเลือกสต็อกหลายตัวในสไตล์ที่เหมาะสม ในกรณีนี้ คุณสามารถพิจารณาจ้างนักสร้างแอนิเมชั่นเพื่อสร้างแอนิเมชั่นเพิ่มเติมที่เหมาะกับไซต์ของคุณและตรงกับตัวเลือกหุ้นที่คุณเลือกไว้แล้ว

สำหรับแอนิเมชั่นสต็อกหรือกราฟิกประเภทใดก็ตาม ให้คำนึงถึงข้อกำหนดสิทธิ์การใช้งานสำหรับแอนิเมชั่นสต็อก และตรวจสอบให้แน่ใจว่าได้สนับสนุนแอนิเมชั่นให้กับผู้ออกแบบดั้งเดิมหากจำเป็น

การเพิ่มแอนิเมชั่น Lottie ใน WordPress

เป็นกระบวนการที่ค่อนข้างราบรื่นในการเพิ่มแอนิเมชั่นล็อตตี้ลงในเว็บไซต์ WordPress คุณสามารถใช้วิดเจ็ต HTML ที่กำหนดเองเพื่อเพิ่มโค้ดแอนิเมชั่นไปยังไซต์ หรือใช้ปลั๊กอิน WordPress เพื่อเพิ่มแอนิเมชัน

วิดเจ็ต HTML ที่กำหนดเอง

นักพัฒนา WordPress ที่มีทักษะสามารถใช้ไลบรารี JavaScript ขนาดเล็กและวิดเจ็ต HTML ที่กำหนดเองเพื่อเพิ่มแอนิเมชั่นล็อตตี้ลงในไซต์ คุณจะเริ่มต้นด้วยการอัปโหลดสคริปต์ lottie.min.js พร้อมกับไฟล์ .json แอนิเมชันและเนื้อหารูปภาพใดๆ ลงในโฟลเดอร์ธีม จากนั้นจะมีข้อมูลโค้ดขนาดเล็กของ JS ที่จะเพิ่มลงในวิดเจ็ตเพื่อเริ่มต้นสคริปต์ Lottie ซึ่งจะโหลดไฟล์แอนิเมชั่น .json ลงในคอนเทนเนอร์ div ที่ต้องการ

แนวทางที่คล่องตัวนี้อาจเหมาะอย่างยิ่งสำหรับไซต์ WordPress ส่วนใหญ่ เนื่องจากจะหลีกเลี่ยงการชั่งน้ำหนักไซต์ด้วยปลั๊กอิน WordPress เพิ่มเติม เมื่อเพิ่มแอนิเมชั่นลอตเตอรี่ คุณยังสามารถควบคุมได้ว่าจะให้แอนิเมชั่นวนซ้ำ วนซ้ำกี่ครั้ง และสิ่งใดที่อาจทริกเกอร์องค์ประกอบที่เคลื่อนไหวบนหน้าได้

ปลั๊กอินส่วนใหญ่สำหรับการเพิ่มแอนิเมชั่นล็อตตี้โดยไม่ได้รับความช่วยเหลือจากนักพัฒนาต้องใช้ตัวสร้างเพจ Elementor ดังนั้นแนวทาง HTML ที่กำหนดเองจึงมีแนวโน้มที่จะทำงานได้ดีขึ้นหากคุณใช้ปลั๊กอินตัวสร้างธีมหรือหน้าอื่นที่ไม่ใช่ Elementor

การเพิ่มองค์ประกอบลงในไซต์โดยไม่มีปลั๊กอินยังดีกว่าสำหรับความเร็วและประสิทธิภาพของเว็บไซต์ เนื่องจากการเพิ่มปลั๊กอินมากขึ้นเรื่อยๆ จะทำให้ไซต์มีน้ำหนักลง

ตัวเลือกปลั๊กอิน WordPress

หากคุณไม่ต้องการให้นักพัฒนาดำเนินการตามวิธีที่กำหนดเอง ตัวเลือกอื่นในการเพิ่มวิดเจ็ตล็อตตี้ในไซต์ของคุณคือการใช้ปลั๊กอิน WordPress

Elementor Pro – Lottie Widget

Elementor คือเครื่องมือสร้างหน้าสำหรับ WordPress ที่มีคุณลักษณะการลากและวาง และใบอนุญาต Elementor Pro มีวิดเจ็ต Lottie ด้วยวิดเจ็ตนี้ คุณสามารถเพิ่มแอนิเมชั่นล็อตตี้โดยไม่ต้องใช้โค้ด และปรับแต่งขนาดและการทำงานของแอนิเมชั่น ปลั๊กอินนี้เชื่อมต่อกับเว็บไซต์สต็อกของ Lottie Files ได้อย่างสะดวก ดังนั้นคุณสามารถเลือกตัวเลือกแอนิเมชั่นสต็อกได้โดยตรงจากไซต์หรืออัปโหลดการสร้างสรรค์ของคุณเอง

Gutenberg Blocks – สุดยอดโปรแกรมเสริม

หากคุณกำลังใช้ตัวแก้ไข Gutenberg บนไซต์ของคุณ ปลั๊กอิน Ultimate Addon สำหรับ Gutenberg อาจเป็นทางเลือกที่ดีสำหรับการเพิ่มแอนิเมชั่นลอตตี้ด้วยความช่วยเหลือของปลั๊กอิน ตัวแก้ไข Gutenberg เป็นส่วนหนึ่งของแกนหลักของ WordPress ตั้งแต่เปิดตัว WordPress 5.0 แต่ก็ไม่ได้รับความนิยมสูงสุด ไซต์จำนวนมากยังคงใช้ตัวแก้ไขแบบคลาสสิกหรือตัวสร้างเพจอื่นๆ เช่น Site Origin, Elementor หรือ Beaver Builder เป็นต้น

อย่างไรก็ตาม มันเป็นทางเลือกที่เหมาะสม Ultimate Addons สำหรับ Gutenberg เป็นปลั๊กอินที่ได้รับการตรวจสอบอย่างดีและมีคุณสมบัติที่ยอดเยี่ยมมากมาย รวมถึงตัวเลือกในการเพิ่มแอนิเมชั่นล็อตตี้และควบคุมตัวเลือกขั้นสูง เช่น ความเร็วและทริกเกอร์ของแอนิเมชัน

ปลั๊กอิน WordPress เพิ่มเติม

มีปลั๊กอินเพิ่มเติมในไดเร็กทอรี WordPress เพื่อเพิ่มและปรับแต่งแอนิเมชั่นล็อตตี้ โปรดทราบว่าปลั๊กอินบางตัวต้องการให้ไซต์ของคุณสร้างและใช้ Elementor เช่น Premium Addons สำหรับ Elementor และ Elementskit Addon สำหรับ Elementor นอกจากนี้ยังมีปลั๊กอินสำหรับธีมและเครื่องมือสร้าง WordPress อื่นๆ เช่น ธีม Divi หรือบล็อก Gutenberg

ถึงเวลาสร้างแอนิเมชั่น

แอนิเมชั่น Lottie สามารถเข้าถึงได้มากสำหรับทุกคนที่มีไซต์ WordPress ไม่ว่าคุณจะต้องการแอนิเมชั่นแบบกำหนดเองหรือแอนิเมชั่นสต็อก แอนิเมชั่นฮีโร่ หรือแอนิเมชั่นแบบเลื่อน แหล่งข้อมูลก็อยู่ใกล้แค่เอื้อม

คุณต้องมีความคิดสร้างสรรค์ในรูปลักษณ์ที่คุณต้องการให้แอนิเมชั่นของคุณออกมาและสิ่งที่คุณต้องการให้ทำ และเมื่อคุณเริ่มสำรวจความเป็นไปได้ของลอตตี้แอนิเมชั่น คุณจะเริ่มตระหนักว่ามันสามารถเพิ่มคุณภาพให้กับเว็บไซต์ของคุณได้มากเพียงใด .