วิธีทำให้ตัวอักษรเคลื่อนไหวสำหรับการออกแบบข้อความที่ไม่ซ้ำใน Divi

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

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

มาเริ่มกันเลย.

แอบมอง

ดาวน์โหลดเค้าโครงตัวอย่างการออกแบบตัวอักษรแอนิเมชั่นฟรี

หากต้องการใช้การออกแบบตัวอักษรแอนิเมชั่นจากบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

เริ่มต้น

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

ตอนนี้คุณพร้อมที่จะออกแบบแล้ว!

การสร้างเค้าโครงสำหรับตัวอักษรเคลื่อนไหว

การเพิ่มส่วน แถว และคอลัมน์

ไปข้างหน้าและสร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์

ก่อนที่เราจะเริ่มเพิ่มโมดูลข้อความของเรา (ซึ่งจะมีตัวอักษรสีขาว) ให้เพิ่มภาพพื้นหลังสีเข้มลงในส่วนนั้นก่อน เปิดการตั้งค่าส่วนและเพิ่มรูปภาพพื้นหลัง ฉันกำลังใช้ภาพพื้นหลังที่เป็นนามธรรมจากเลย์เอาต์ที่สร้างไว้ล่วงหน้าของ Investment Company Landing Page

การสร้างบล็อกตัวอักษรส่วนบุคคลด้วยโมดูลข้อความ

ก่อนที่เราจะสามารถเพิ่มแอนิเมชั่นให้กับตัวอักษร เราต้องสร้างโมดูลข้อความแยกต่างหากสำหรับตัวอักษรแต่ละตัวที่เราต้องการเพิ่มก่อน สำหรับตัวอย่างนี้ เราจะสร้างข้อความ “Divi Design” เนื่องจากวลีข้อความนี้มีช่องว่างอักขระ 11 ตัว (รวมถึงช่องว่างระหว่างตัวอักษร เราจึงต้องเพิ่มโมดูลข้อความ 11 โมดูล

ไปข้างหน้าและเพิ่มโมดูลข้อความลงในคอลัมน์

ในกล่องเนื้อหา ให้เพิ่มตัวอักษรตัวแรกของข้อความของคุณ ซึ่งในกรณีนี้คือตัวอักษร "d"

จากนั้นอัปเดตการตั้งค่าการออกแบบข้อความดังนี้:

• แบบอักษรของข้อความ: Rubik
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: #ffffff
• ขนาดข้อความ: 80px (เดสก์ท็อป), 50px (แท็บเล็ต), 30px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.6em
• การวางแนวข้อความ: center

ถัดไป เพิ่มแอนิเมชั่นให้กับโมดูลข้อความดังนี้:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขึ้น
• ระยะเวลาแอนิเมชั่น: 600ms
• ภาพเคลื่อนไหวล่าช้า: 100ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

ทำซ้ำโมดูลข้อความและอัปเดตเนื้อหาด้วยตัวอักษร "i" จากนั้นเพิ่มการดีเลย์ของแอนิเมชั่น 100ms ดังนี้:

• ภาพเคลื่อนไหวล่าช้า: 200ms

ทำซ้ำโมดูลข้อความและอัปเดตเนื้อหาด้วยตัวอักษร "v" จากนั้นเพิ่มการดีเลย์ของแอนิเมชันเป็น 300 มิลลิวินาที

• ภาพเคลื่อนไหวล่าช้า: 300ms

ทำซ้ำโมดูลข้อความและอัปเดตเนื้อหาด้วยตัวอักษร "i" จากนั้นเพิ่มการดีเลย์ของแอนิเมชันเป็น 400 มิลลิวินาที

• ภาพเคลื่อนไหวล่าช้า: 400ms

สำหรับโมดูลข้อความถัดไปนี้ เราต้องการเพิ่มช่องว่าง ทำซ้ำโมดูลข้อความและเพิ่ม html ต่อไปนี้ลงในกล่องเนื้อหา:

 

ไม่จำเป็นต้องอัปเดตการหน่วงเวลาของภาพเคลื่อนไหวสำหรับรายการนี้

จากนั้นทำซ้ำโมดูลข้อความและอัปเดตเนื้อหาด้วยตัวอักษร "d" นี่คืออักษรตัวแรกของคำว่า "การออกแบบ" จากนั้นเพิ่มการดีเลย์ของแอนิเมชันเป็น 500 มิลลิวินาที

• ภาพเคลื่อนไหวล่าช้า: 500ms

ดำเนินขั้นตอนการทำซ้ำโมดูลข้อความและเพิ่มการหน่วงเวลาของภาพเคลื่อนไหว 100 มิลลิวินาทีสำหรับตัวอักษรที่เหลือแต่ละตัวที่สะกดคำว่า "การออกแบบ"

• ตัวอักษร “e”: ภาพเคลื่อนไหวล่าช้า 600ms
• ตัวอักษร “s”: ภาพเคลื่อนไหวล่าช้า 700ms
• ตัวอักษร “i”: ภาพเคลื่อนไหวล่าช้า 800ms
• ตัวอักษร “g”: ภาพเคลื่อนไหวล่าช้า 900ms
• ตัวอักษร “n”: ภาพเคลื่อนไหวล่าช้า 1000ms

นี่คือสิ่งที่การออกแบบดูเหมือนจนถึงตอนนี้

การเพิ่มคุณสมบัติ Flex เพื่อจัดแนวโมดูลในแนวนอน

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

display: flex;

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

นอกจากนี้เรายังต้องเพิ่มความกว้างของรางน้ำแบบกำหนดเองเพื่อเอาระยะขอบด้านล่างใต้ตัวอักษรออกและเพิ่มช่องว่างด้านบนและด้านล่างในแถวเพื่อให้ตัวอักษรมีพื้นที่บางส่วนสำหรับเคลื่อนไหว

• ความกว้างของรางน้ำ: 1
• แพ็ดดิ้งแบบกำหนดเอง: บน 5vw ล่าง 5vw

นี่คือผลลัพธ์สุดท้าย

การเพิ่มสไตล์แอนิเมชั่นต่างๆ

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

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

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

นี่คือตัวอย่างบางส่วน

แอนิเมชั่นข้อความซูมย้อนกลับ

หากต้องการทำให้ตัวอักษรเคลื่อนไหวด้วยเอฟเฟกต์การซูมย้อนกลับ ให้อัปเดตการตั้งค่าองค์ประกอบ (การตั้งค่าสำหรับโมดูลทั้งหมด) ดังนี้:

• สไตล์แอนิเมชั่น: Zoom
• ทิศทางของแอนิเมชั่น: ศูนย์
• ความเข้มของแอนิเมชั่น: 200%

นี่คือผลลัพธ์สุดท้าย

แอนิเมชั่นข้อความ Rolling Wave

หากต้องการทำให้ตัวอักษรเคลื่อนไหวด้วยเอฟเฟกต์คลื่นกลิ้ง ให้อัปเดตการตั้งค่าองค์ประกอบ (การตั้งค่าสำหรับโมดูลทั้งหมด) ดังนี้:

• สไตล์แอนิเมชั่น: หมุน
• ทิศทางของแอนิเมชั่น: ขึ้น
• ความเข้มของแอนิเมชั่น: 100%

นี่คือผลลัพธ์สุดท้าย

นิเมชั่นข้อความโดมิโน

หากต้องการทำให้ข้อความเคลื่อนไหวด้วยเอฟเฟกต์โดมิโน ให้อัปเดตการตั้งค่าองค์ประกอบ (การตั้งค่าสำหรับโมดูลทั้งหมด) ดังนี้:

• สไตล์แอนิเมชั่น: Flip
• ทิศทางของแอนิเมชั่น: ซ้าย
• ความเข้มของแอนิเมชั่น: 100%

นี่คือผลลัพธ์สุดท้าย

แอนิเมชั่นข้อความแบบยืนขึ้น

หากต้องการทำให้ข้อความเคลื่อนไหวด้วยเอฟเฟกต์โดมิโน ให้อัปเดตการตั้งค่าองค์ประกอบ (การตั้งค่าสำหรับโมดูลทั้งหมด) ดังนี้:

• สไตล์แอนิเมชั่น: พับ
• ทิศทางของแอนิเมชั่น: ขึ้น
• ความเข้มของแอนิเมชั่น: 100%

จากนั้นเพิ่มเปอร์สเปคทีฟเพื่อสร้างองค์ประกอบการออกแบบ 3 มิติโดยเพิ่ม css ต่อไปนี้ในองค์ประกอบคอลัมน์หลักภายใต้การตั้งค่าแถว

องค์ประกอบคอลัมน์หลัก CSS:

perspective: 1000px;

นี่คือผลลัพธ์สุดท้าย

ตัวอักษรเคลื่อนไหวโดยใช้การรวมกันของทิศทางแอนิเมชั่น

หากคุณต้องการสร้างสรรค์มากขึ้น คุณสามารถทำให้ตัวอักษรเคลื่อนไหวได้โดยใช้เอฟเฟกต์แอนิเมชั่นผสมกัน สำหรับตัวอย่างนี้ ฉันจะใช้ทิศทางของแอนิเมชันและความเข้มข้นสำหรับสไตล์สไลด์ สิ่งนี้จะทำให้เรามีการนำเสนอที่ไม่เหมือนใคร

นี่คือวิธีการทำ

ขั้นแรก ทำซ้ำส่วนใดส่วนหนึ่งที่เราสร้างไว้ก่อนหน้านี้ เพื่อให้เราสามารถเริ่มต้นกระบวนการออกแบบได้ล่วงหน้า

จากนั้นลบโมดูลข้อความ 4 โมดูลแรกเพื่อให้แสดงเฉพาะข้อความ "การออกแบบ"

การตั้งค่ามาตรา

ต่อไป เนื่องจากเราต้องการให้ตัวอักษรบางตัวในแอนิเมชั่นเริ่มต้นนอกวิวพอร์ตของส่วน เราจะต้องเพิ่มข้อมูลโค้ด css เล็กน้อยในการตั้งค่าส่วนดังนี้:

overflow: hidden;

สิ่งนี้จะซ่อนตัวอักษรไว้จนกว่าจะเข้ามาในส่วน

การตั้งค่าแถว

ตอนนี้ เพื่อให้แน่ใจว่าโมดูลข้อความ (ตัวอักษร) ของเราอยู่ตรงกลาง เราจำเป็นต้องเพิ่ม css ต่อไปนี้ในการตั้งค่าแถว:

display:flex;
justify-content: center;

การตั้งค่าทั่วไปของโมดูลข้อความ

ใช้การเลือกหลายรายการ อัปเดตโมดูลข้อความทั้งหกด้วยการตั้งค่าองค์ประกอบต่อไปนี้:

• ระยะขอบที่กำหนดเอง: เหลือ 3% ขวา 3%
• ความกว้างของเส้นขอบ: 1px
• สีเส้นขอบ: #ffffff

• สไตล์แอนิเมชั่น: สไลด์
• ระยะเวลาของแอนิเมชั่น: 2000ms
• ภาพเคลื่อนไหวล่าช้า: 100ms
• ความเข้มของแอนิเมชั่น: 300%

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

การตั้งค่าส่วนบุคคลของโมดูลข้อความ

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

• จดหมายD
  ทิศทางของแอนิเมชั่น: ขึ้น
• จดหมาย E
  ทิศทางของแอนิเมชั่น: ลง
• จดหมาย S
  ทิศทางของแอนิเมชั่น: ซ้าย
  ความเข้มของแอนิเมชั่น: 80%
• จดหมายฉัน
  ทิศทางของแอนิเมชั่น: ขวา
  ความเข้มของแอนิเมชั่น: 80%
• จดหมายG
  ทิศทางของแอนิเมชั่น: ลง
• จดหมายN
  ทิศทางของแอนิเมชั่น: ขึ้น

นี่คือการออกแบบขั้นสุดท้าย

และนี่คือลักษณะที่ปรากฏบนมือถือ

ความคิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!