วิธีออกแบบ Text Mask ด้วยแอนิเมชั่นพื้นหลังบน Scroll ใน Divi

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

ในบทช่วยสอนนี้ เราจะแสดงวิธีออกแบบหน้ากากข้อความพร้อมแอนิเมชั่นพื้นหลังบนการเลื่อนใน Divi การออกแบบมีเอกลักษณ์เฉพาะตัวและเอฟเฟกต์การเลื่อนทำให้ดูมีชีวิตชีวา

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การออกแบบ Text Mask ด้วยแอนิเมชั่นพื้นหลังใน Divi

เพิ่มแถว

หากต้องการเริ่มต้น ให้เพิ่มแถวสองคอลัมน์ในส่วนปกติที่เป็นค่าเริ่มต้น

อัปเดตการตั้งค่าส่วน

ก่อนเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าส่วนและอัปเดตสีพื้นหลังและช่องว่างภายในดังนี้:

• สีพื้นหลัง: #750046

• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

อัปเดตการตั้งค่าแถว

หลังจากตั้งค่าส่วนเสร็จแล้ว ให้เปิดการตั้งค่าสำหรับแถวและอัปเดตการตั้งค่าการออกแบบต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

สิ่งสำคัญคือต้องตั้งค่าความกว้างของรางน้ำเป็น 1 และความกว้างเป็น 100% เนื่องจากเราจะใช้หน่วยความยาว vw สำหรับข้อความของเราเมื่อสร้างการออกแบบรูปแบบข้อความ เนื่องจากหน่วยความยาว vw อิงตามความกว้างของเบราว์เซอร์ จึงเป็นสิ่งสำคัญที่คอนเทนเนอร์หลัก (ส่วนและแถว) มีความกว้างเท่ากับเบราว์เซอร์ซึ่งเท่ากับ 100%

อัปเดตการตั้งค่าคอลัมน์ 1

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

เปิดการตั้งค่าสำหรับคอลัมน์ 1 และอัปเดตสิ่งต่อไปนี้:

• สีพื้นหลัง: #750046
• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

การสร้างมาสก์ข้อความ

หากต้องการสร้างรูปแบบข้อความ ให้เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เนื้อหาข้อความ

จากนั้นเพิ่มคำว่า "divi" ลงในเนื้อหา เรากำลังใช้คำที่มีตัวอักษร 4 ตัวเพื่อให้เรียงซ้อนกันเท่าๆ กันสำหรับการออกแบบสี่เหลี่ยมจัตุรัส

พื้นหลังข้อความ

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

• สีพื้นหลัง: #ffffff

การออกแบบข้อความ

จากนั้นภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• แบบอักษรข้อความ: Rubik Mono One
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: #000000
• ขนาดตัวอักษร: 25vw (เดสก์ท็อป), 50vw (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดข้อความ: 0.8em
• การจัดตำแหน่งข้อความ: center

• Padding: บน 8vw, 8vw ด้านล่าง

โหมดผสมผสานข้อความ

เพื่อให้การออกแบบมาสก์ข้อความสมบูรณ์ ให้เพิ่มโหมดผสมผสานต่อไปนี้:

• โหมดผสมผสาน: หน้าจอ

จนถึงตอนนี้ ส่วนผสมหลักสี่อย่างสำหรับเอฟเฟกต์มาสก์ข้อความนี้มีดังต่อไปนี้:

1. พื้นหลังคอลัมน์
2. พื้นหลังข้อความสีขาว
3. ข้อความสีดำ
4. โหมดผสมผสานหน้าจอบนโมดูลข้อความ

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

เพิ่มภาพพื้นหลัง

หากต้องการเพิ่มรูปภาพพื้นหลังลงในรูปแบบข้อความ ให้สร้างโมดูลรูปภาพใหม่และอัปโหลดรูปภาพที่มีขนาดประมาณ 1700 x 2500 พิกเซล ขนาดของรูปภาพมีความสำคัญเพื่อให้รูปภาพครอบคลุมความสูงและความกว้างของคอลัมน์

การออกแบบภาพ

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

• บังคับเต็มความกว้าง: ใช่
• โหมดผสมผสาน: หน้าจอ

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

ตำแหน่งภาพ

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

• ตำแหน่ง: Absolute
• ดัชนี Z: -1

เอฟเฟกต์การเลื่อนภาพ

เมื่อการออกแบบรูปภาพพร้อมแล้ว ให้ไปที่แท็บขั้นสูงและอัปเดตตัวเลือกเอฟเฟกต์การเลื่อนดังนี้:

ใต้แท็บ Vertical Motion

• ออฟเซ็ตเริ่มต้น: -1 (ที่ 0%)
• ออฟเซ็ตกลาง: 0 (ที่ 50%)
• ออฟเซ็ตสิ้นสุด: 1 (ที่ 100%)

ภายใต้แท็บการเคลื่อนไหวในแนวนอน

• ออฟเซ็ตเริ่มต้น: -0.5 (ที่ 0%)
• ออฟเซ็ตกลาง: 0 (ที่ 50%)
• ออฟเซ็ตสิ้นสุด: 0.5 (ที่ 100%)

ใต้แท็บการปรับขนาดขึ้นและลง

• สเกลเริ่มต้น: 110% (ที่ 0%)
• ระดับกลาง: 125% (ที่ 50%)
• สเกลสิ้นสุด: 140% (ที่ 100%)

ผลลัพธ์

คุณสามารถเพิ่มระยะขอบด้านบนและด้านล่างให้กับส่วนเพื่อให้คุณสามารถตรวจสอบผลลัพธ์ได้

การสร้างข้อความจำลอง

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

อัปเดตเนื้อหาเนื้อหาดังต่อไปนี้:

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

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

• สีข้อความ: เบา
• หัวข้อที่ 2 แบบอักษร: Rubik
• หัวเรื่อง 2 ขนาดข้อความ: 4vw
• Padding (เดสก์ท็อป): 16vw บน, 5vw ซ้าย, 5vw ขวา
• Padding (แท็บเล็ต): บน 16vw, 16vw ล่าง, 5vw ซ้าย, 5vw ขวา

ผลลัพธ์

ปรับแต่งเสริม

พื้นหลังสีดำ / ข้อความสีขาว

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

เปิดการตั้งค่าโมดูลข้อความและเปลี่ยนแปลงสิ่งต่อไปนี้:

• สีพื้นหลัง: #000000 (สีดำ)
• สีข้อความ: #ffffff (สีขาว)
• โหมดผสมผสาน: ทวีคูณ

และนี่คือผลลัพธ์…

หมุนภาพ PNG

และคุณสามารถเปลี่ยนภาพเคลื่อนไหวให้เป็นภาพที่มีพื้นหลังโปร่งใส (PNG) เพื่อเอฟเฟกต์สุดเจ๋งได้อีก นี่คือตัวอย่างรูปภาพ PNG ที่ฉันใช้โดยเพิ่มเอฟเฟกต์การเลื่อนแบบหมุน

ผลลัพธ์สุดท้าย

นี่คือรูปลักษณ์อื่นของการออกแบบทั้งหมด

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

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

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

ไชโย!