เพิ่มแอนิเมชั่นการโหลดไปยังเว็บไซต์ WordPress ของคุณ (10 ตัวเลือกที่แตกต่างกัน)

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

ในโพสต์นี้ เราจะมาดูกันว่าแอนิเมชั่นการโหลดคืออะไร จุดประสงค์ของพวกมันคืออะไร และวิธีเพิ่มแอนิเมชั่นลงในไซต์ WordPress รวมถึงไซต์ Divi ของคุณ

แอนิเมชั่นการโหลดคืออะไร?

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

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

ทำความคุ้นเคยกับการโหลดแอนิเมชั่น

สไตล์การโหลดแอนิเมชั่นที่พบบ่อยที่สุดคือวงกลมหมุน อย่าสับสนกับ “วงกลมแห่งความตายสีรุ้ง” จากคอมพิวเตอร์ Apple แอนิเมชั่นการโหลดแบบวงกลมหมุนมีการเคลื่อนไหวแบบไล่ระดับสีที่เซ รถตักล่วงหน้าแบบหมุนรอบแรกมีรุ่นต่างๆ มากมาย ตั้งแต่ดอกไม้ วงกลม เกล็ดหิมะ และแม้แต่หยินหยางที่ปั่น ทุกวันนี้แอนิเมชั่นการโหลดแบบหมุนมีไดนามิกและดูดีกว่า

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

เคล็ดลับสำหรับการโหลดแอนิเมชั่นที่ดีขึ้น

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

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

ประโยชน์ของแอนิเมชั่นการโหลดแบรนด์

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

วิธีเพิ่มแอนิเมชั่นการโหลดไปยังไซต์ WordPress ของคุณ

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

การใช้ปลั๊กอินเพื่อเพิ่มแอนิเมชั่นการโหลด

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

Loftloader

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

พรีโหลดแบบแบน

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

ตัวโหลดล่วงหน้าที่ดีที่สุด

Best Preloader เป็นปลั๊กอินแอนิเมชั่นการโหลดหนึ่งตัวเลือกฟรีที่เหมาะกับสไตล์เว็บไซต์ทุกรูปแบบ ฉันมาพร้อมกับแอนิเมชั่นหนึ่งตัวพร้อมการควบคุมที่ปรับแต่งได้

ตัวโหลดหน้า

Page Loader เป็นปลั๊กอินแอนิเมชั่นการโหลดระดับพรีเมียมที่มีตัวเลือกการปรับแต่งและการสร้างแบรนด์มากมาย เป็นหนึ่งในปลั๊กอินตัวโหลดล่วงหน้าที่ได้รับความนิยมในตลาด

WP Smart Preloader

WP Smart Preloader เป็นปลั๊กอินโอเพ่นซอร์สฟรีพร้อมตัวเลือกการปรับแต่งแบบเต็ม แอนิเมชั่นไม่ซับซ้อนมากนัก แต่จะเข้ากับสไตล์ของเว็บไซต์ทุกรูปแบบ คุณสามารถปรับแต่งสีและการตั้งค่าได้อย่างง่ายดาย

การเพิ่มแอนิเมชั่นการโหลดโดยไม่ต้องใช้ปลั๊กอิน

หากคุณต้องการหลีกเลี่ยงการใช้ปลั๊กอิน มีแอนิเมชั่นการโหลดที่พร้อมใช้งานฟรีและพร้อมใช้งานมากมาย เช่นเดียวกับบทช่วยสอนขั้นสูงที่มีข้อมูลโค้ดที่คุณต้องเพิ่ม

PixelBuddha พร้อมมัลติมีเดีย:

พวกที่ Multimedia ได้เผยแพร่บทช่วยสอนง่ายๆ พร้อมแอนิเมชั่นการโหลดสองชุดฟรีจาก PixelBuddha และโค้ดที่คุณต้องใช้ในการตั้งค่าบนเว็บไซต์ของคุณ

รหัสปากกา:

บทความขนาดกลางนี้โดย UX Planet ผู้เขียนรวบรวมภาพเคลื่อนไหวการโหลดจำนวนมากในรูปแบบต่างๆ มีทั้งแบบเรียบง่ายและแบบซับซ้อนกว่า ส่วนใหญ่ถูกฝังจาก CodePen และคุณสามารถรับข้อมูลโค้ด HTML และ CSS จากวิดเจ็ตได้ คุณจะต้องแทรกสิ่งเหล่านี้ลงในชุดโค้ดที่สมบูรณ์สำหรับการตั้งค่าแอนิเมชั่นการโหลด

สปินคิท:

Tobias Ashlink มี SpinKit พร้อมคอลเลกชันแอนิเมชั่นการโหลดที่ดีพร้อมรหัสที่มีให้ผ่าน GitHub สิ่งเหล่านี้จะต้องถูกเพิ่มเข้าไปในชุดโค้ดแบบเต็มสำหรับการตั้งค่าพรี loaer

กำลังโหลด io:

Loading.io คือชุดของแอนิเมชั่นการโหลดที่มีตัวเลือกที่แตกต่างกันมากมาย มีตัวโหลดล่วงหน้า CSS, ตัวโหลดล่วงหน้า GIF, ปุ่มและอีกมากมาย ดูไซต์ของพวกเขาเพื่อค้นหาตัวเลือกทั้งหมดและคำแนะนำในการเพิ่มลงในไซต์ของคุณ

พิกเซลวาร์ส:

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

ด้วยตัวเลือกมากมาย คุณจะเลือกแบบไหน?

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

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

ภาพเด่นผ่าน muchomoros / shutterstock.com