วิธีเพิ่มแอนิเมชั่นให้กับข้อความใน WordPress

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

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

วิธีเพิ่มเอฟเฟกต์ข้อความเคลื่อนไหวใน WordPress

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

Animated Text Effect คืออะไร และมีลักษณะอย่างไร

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

ข้อความเคลื่อนไหวแตกต่างจากข้อความทั่วไปเล็กน้อย โดยปกติแล้ว ข้อความประเภทนี้จะไม่เคลื่อนที่ด้วยตัวมันเอง แต่มันมีเอฟเฟ็กต์ที่ทำให้ดูเหมือนว่ามันกำลังเคลื่อนที่ผ่านหน้าจอ ดังนั้น ข้อความแฟนซีทำให้ผู้คนมีแนวโน้มที่จะ คลิกเนื้อหา ลิงก์ หรือเปิดอีเมล

บทบาทของข้อความเคลื่อนไหวในเว็บไซต์ของคุณ

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

หัวเรื่องแบบเคลื่อนไหวหรือส่วนฮีโร่ที่ มีข้อความแฟนซีมีบทบาทดังต่อไปนี้-

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

วิธีที่ง่ายที่สุดในการเพิ่มเอฟเฟ็กต์ข้อความเคลื่อนไหว

การใช้ปลั๊กอิน WordPress

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

ข้อความเคลื่อนไหวแฟนซีเป็นวิดเจ็ตที่น่าประทับใจนำเสนอโดย ElementsKit pro

ลงชื่อเข้าใช้ แดชบอร์ดของคุณ -> เลือกหน้าหรือโพสต์ -> คลิกแก้ไขด้วย ElementsKit -> ค้นหาวิดเจ็ตข้อความภาพเคลื่อนไหวแฟนซี ElementsKit -> ลากและวางวิดเจ็ต

ส่วนเนื้อหา

ส่วนนี้เรียกว่า ส่วนข้อความแฟนซี ประกอบด้วยฟิลด์ต่อไปนี้-

แอนิเมชั่น

• สไตล์แอนิเมชั่น – ที่นี่มี 2 ตัวเลือกคือ Text หรือ SVG ทั้งคู่ให้คุณสร้างสไตล์แอนิเมชั่นที่แตกต่างกัน
• ประเภทแอนิเมชัน – ขึ้นอยู่กับประเภทแอนิเมชันของคุณ คุณจะได้รับตัวเลือกมากมายที่นี่
• เปิดเผยระยะเวลา (มิลลิวินาที) – คุณสามารถตั้งค่าระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาทีโดยใช้กล่องตัวเลือก
• เปิดเผยการหน่วงเวลาของภาพเคลื่อนไหว (ms) – ปรับเวลาหน่วงของภาพเคลื่อนไหวที่นี่ ระบุว่าแอนิเมชันสามารถเริ่มในภายหลัง ทันทีจากจุดเริ่มต้น หรือทันทีและบางส่วนผ่านแอนิเมชัน

เนื้อหา

• ข้อความคำนำหน้า – คุณต้องเขียนเนื้อหาคำนำหน้าที่คุณต้องการแสดงที่นี่ หมายความว่าจะถูกเขียนขึ้นก่อนอนิเมชั่นแฟนซี
• รายการแฟนซี - เพิ่มรายการที่นี่สำหรับแอนิเมชั่นแฟนซี
• ข้อความต่อท้าย – เขียนเนื้อหาต่อท้ายที่คุณต้องการแสดง ดังนั้นจะระบุไว้หลังอนิเมชั่นแฟนซี

• แท็ก HTML ชื่อ – เลือกแท็ก HTML ของเนื้อหาที่นี่
• ลิงก์ (ไม่บังคับ) – เพิ่มลิงก์ใด ๆ หากคุณต้องการให้ผู้ใช้เปลี่ยนเส้นทางไปยังตำแหน่งอื่น

ส่วนสไตล์

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

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

การใช้ CSS

เมื่อสร้างภาพเคลื่อนไหว CSS ใน WordPress ให้คำนึงถึง สิ่งพื้นฐานที่สำคัญ ต่อไปนี้:

• การตั้งชื่อแอนิเมชั่นที่ถูกต้อง – นี่คือชื่อที่จะแสดงบนองค์ประกอบเมื่อมันถูกย้ายโดยแอนิเมชั่น CSS ตัวอย่างเช่น หากคุณมีปุ่มที่มีภาพเคลื่อนไหวชื่อ "fadeIn" นี่จะเป็นค่าที่คุณจะใช้สำหรับคุณสมบัตินี้
• ระยะเวลาของแอนิเมชัน – นี่คือจำนวนวินาทีที่แอนิเมชันจะใช้เวลาในการดำเนินการให้เสร็จสมบูรณ์ คุณยังสามารถตั้งค่านี้เป็น none หรือ 0 เพื่อทำให้แอนิเมชันคงอยู่ตลอดไปหรือจนกว่าจะมีสิ่งอื่นเกิดขึ้น (เช่น การโหลดหน้าเว็บ)
• ฟังก์ชันการจับเวลาแอนิเมชัน – สิ่งนี้จะควบคุมการเคลื่อนที่ขององค์ประกอบจากจุดหนึ่งไปยังอีกจุดหนึ่งโดยขึ้นอยู่กับระยะเวลาที่ใช้สำหรับระยะเวลาหนึ่ง (หน่วยเป็นมิลลิวินาที) ตัวอย่างเช่น หากคุณตั้งค่าคุณสมบัตินี้ให้ค่อยๆ ลดลง องค์ประกอบของคุณจะเริ่มเคลื่อนที่อย่างช้าๆ แล้วเร็วขึ้นเมื่อสิ้นสุดระยะเวลาก่อนที่จะเริ่มอีกครั้งที่จุดเริ่มต้น
• การหน่วงเวลาของภาพเคลื่อนไหว – เป็นค่าที่ระบุจำนวนมิลลิวินาทีที่ควรเพิ่มหลังจากภาพเคลื่อนไหวเสร็จสิ้นก่อนที่จะเริ่มอีกครั้ง (เช่น 1 วินาที)
• Animation-iteration-count – นี่คือระยะเวลาที่คุณต้องเล่นแอนิเมชั่น การใช้คุณสมบัติ CSS คุณสามารถนับการวนซ้ำนี้ได้
• ทิศทางภาพเคลื่อนไหว – เป็นลำดับหรือทิศทางที่ควรเล่นภาพเคลื่อนไหว อาจเป็นแบบปกติ ย้อนกลับ สลับ และสลับกลับ
• Animation-fill-mode – ค่าเหล่านี้ระบุวิธีการแสดงองค์ประกอบ สามารถเป็นได้ทั้งก่อนและหลังการใช้แอนิเมชั่นกับมัน
• รู้จัก @keyframes – ระบุคุณสมบัติของแอนิเมชั่นที่เปลี่ยนแปลงตลอดหลักสูตร และค่าที่คุณสมบัติเหล่านั้นควรใช้ ตัวอย่างเช่น:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

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

อย่างไรก็ตาม สามารถใช้ from และ to แทน 0% และ 100% ตามลำดับ

การสร้างไฟล์ animate.css

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

เริ่มต้นด้วยการเขียนโค้ดง่ายๆ ลงในไฟล์ CSS ของคุณ โค้ดตัวอย่างสำหรับข้อความแอนิเมชั่นอาจมีลักษณะดังนี้-

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

ตอนนี้เพื่อผูกคีย์เฟรมนี้กับคลาส CSS เราได้ตั้งค่าข้อความชื่อ MyAnimation ดังนั้นหลังจากโค้ดด้านบนตอนนี้ คุณต้องใส่โค้ดด้านล่างลงในไฟล์

 .MyAnimation { animation-name: MyAnimation; }

คุณสามารถค้นหาความรู้แอนิเมชั่น CSS พื้นฐานทั้งหมดและฝึกฝนโค้ดได้ที่นี่!

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

โค้ดด้านบนจะทำให้ข้อความของ แท็ก h1 ของคุณ ' MyAnimation ' เคลื่อนไหว คุณสามารถเปลี่ยนระยะเวลาของภาพเคลื่อนไหวได้โดยเปลี่ยน “3s” เป็นค่า อื่น คุณยังสามารถเปลี่ยนสีได้โดยเปลี่ยนค่าเลขฐานสิบหก เมื่อคุณบันทึกไฟล์ CSS แล้ว คุณสามารถทำการเปลี่ยนแปลงลักษณะที่ปรากฏของเว็บไซต์ของคุณเพิ่มเติมได้ คุณสามารถแก้ไขไฟล์ CSS ได้ คุณสามารถเปลี่ยนฟอนต์ ขนาดของข้อความ และสีของข้อความได้โดยการแก้ไขไฟล์ CSS คุณยังสามารถเปลี่ยนสีพื้นหลังและขนาดของส่วนหัวได้ด้วยการเปลี่ยนไฟล์ CSS

กำลังโหลดไฟล์ animate.css ของคุณไปยังเว็บไซต์ WordPress

หลังจากที่คุณทำงานกับไฟล์เสร็จแล้ว ให้อัปโหลดไปยังไดเร็กทอรีของธีมของคุณ เราได้แบ่งกระบวนการทั้งหมดออกเป็นสามขั้นตอน

ขั้นตอนที่ 1

ไปที่ไซต์โดยใช้ File Transfer Protocol (FTP) -> เลือกไคลเอนต์ FTP (FileZilla, WinSCP, Cyberduck ฯลฯ) -> เลือกข้อมูลประจำตัวที่จำเป็นในบัญชีโฮสติ้งของคุณ

ขั้นตอนที่ 2

เข้าถึงไดเร็กทอรี public_html ของคุณ -> นำทางไปยัง wp-content -> ธีม -> เลือกโฟลเดอร์ของธีมที่ใช้งานอยู่หรือลูก

ขั้นตอนที่ 3

ตอนนี้ ค้นหาไดเร็กทอรีย่อยชื่อ css หากคุณได้รับ ให้อัปโหลดไฟล์ animate.css หรือ animate.min.css จากไฟล์ Animate.css ที่มีไดเร็กทอรีย่อย

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

เรียกใช้ Animate Stylesheet ผ่าน functions.php

คุณจะพบไฟล์ functions.php ในโฟลเดอร์ของธีมที่ใช้งานอยู่ ตอนนี้ คุณต้องเพิ่มข้อมูลโค้ดนี้เพื่อเรียก Animate Stylesheet:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

โปรดจำไว้ว่า หากคุณใช้ไฟล์ animate.min.css จาก Animate.css คุณจะต้องเขียน animate.min.css ในบรรทัดสุดท้าย แทน animate.css หลังจากบันทึกการเปลี่ยนแปลงทั้งหมดแล้ว ให้ไปที่แดชบอร์ด WordPress ของคุณ

ใช้แอนิเมชั่นโดยใช้คลาส CSS

ตอนนี้จึงเป็นไปได้ที่จะใช้คลาสใดก็ได้ที่คุณต้องการในไฟล์ animate.css เพื่อดูเอฟเฟกต์แอนิเมชันต่างๆ ในโพสต์และเพจต่างๆ นอกจากนี้ ไฟล์ Animate.css ยังช่วยให้คุณสามารถอ้างอิงรายการทั้งหมดได้

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

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

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