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

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

ขอเริ่มต้น!

ผลลัพธ์ที่เป็นไปได้

นี่คือรูปลักษณ์ของการออกแบบที่เราจะสร้างในวันนี้

การออกแบบ 1: การไล่ระดับสีพื้นหลังข้อความพร้อมเอฟเฟกต์เลื่อนแนวนอน

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

เพิ่มคอลัมน์

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

เลือกเค้าโครงคอลัมน์ Divi

เพิ่มโมดูลข้อความ

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

เพิ่มโมดูลข้อความ Divi

เนื้อหา

สำหรับ เนื้อหา ให้วางโค้ด HTML ต่อไปนี้ลงในช่อง เนื้อหา:

บันทึกรหัสส่วน

การจัดรูปแบบข้อความ

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

  • สีพื้นหลัง: #ffffff
  • รูปแบบตัวอักษรข้อความ: TT
  • สีข้อความ: # 000000
  • ขนาดตัวอักษร: 100 px (เดสก์ท็อป), 40 px (โทรศัพท์)
  • เว้นวรรคตัวอักษรข้อความ: 0.15em
  • ความสูงของบรรทัดข้อความ: 1em
  • การจัดตำแหน่งของข้อความ: ศูนย์
การปรับแต่งข้อความ Divi
  • แบบอักษรของชื่อเรื่อง: Merriweather
  • น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
  • ลักษณะแบบอักษรของชื่อเรื่อง: TT
  • การจัดตำแหน่งข้อความส่วนหัว: กึ่งกลาง
  • สีข้อความส่วนหัว: # 000000
  • ขนาดข้อความส่วนหัว: 200px (เดสก์ท็อป), 80px (โทรศัพท์)
  • ระยะห่างตัวอักษรของชื่อเรื่อง: 0.15em
  • ความสูงของบรรทัดหัวเรื่อง: 1em

แพ็ดดิ้งและตัวกรอง

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

ในการเพิ่มตัวกรองและตัวกรองให้ปรับปรุงรายการต่อไปนี้:

  • padding: สูง 15px, ต่ำ 20px
  • โหมดผสมผสาน: หน้าจอ

หมายเหตุ: โหมดผสมผสานหน้าจอจะทำงานได้ดีที่สุดกับข้อความสีดำบนพื้นหลังสีขาว หากเราต้องการใช้ข้อความสีขาวบนพื้นหลังสีดำเราจะใช้โหมด Multiply blend

การกำหนดค่าระยะห่างโมดูลข้อความ Divi

ตัวแยกบนและล่าง

เมื่อโมดูลข้อความของเราเสร็จสมบูรณ์แล้วให้เพิ่มตัวคั่น (ด้านบนและด้านล่างโมดูลข้อความ) สำหรับองค์ประกอบการออกแบบเพิ่มเติม

เพิ่มตัวคั่นที่ต่ำกว่า

เพิ่มโมดูลการแยกใหม่ภายใต้โมดูลข้อความ

เพิ่มโมดูลตัวคั่น Divi
การตั้งค่าการแยกที่สูงขึ้น

เปิดการตั้งค่าตัวแยกและเลือกไม่เพื่อแสดงตัวแยก

ผลข้อความเลื่อนพื้นหลัง divi

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

  • สีพื้นหลังไล่ระดับสีด้านซ้าย: # 000000
  • สีพื้นหลังไล่ระดับสีทางด้านขวา: #ffffff
  • ทิศทางการไล่ระดับสี: 90deg
  • ตำแหน่งเริ่มต้น: 48%
  • ตำแหน่งสุดท้าย: 0%
  • โหมดผสมผสาน: หน้าจอ
การกำหนดค่าตัวคั่นสี

จากนั้นอัปเดตความสูงของตัวแบ่งบนหน้าจอโทรศัพท์ดังนี้:

  • ความสูง: 15px (โทรศัพท์)
การกำหนดค่าตัวคั่น Divi

เพิ่มตัวคั่นด้านบน

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

แทรกตัวแบ่ง

จากนั้นสลับสีบนพื้นหลังไล่ระดับสี

การแทรกพื้นหลังไล่ระดับสี

อัพเดตพารามิเตอร์บรรทัด

เมื่อมีตัวคั่นบนและล่างของเราเข้าที่แล้วให้อัปเดตพารามิเตอร์บรรทัดดังนี้:

  • ความกว้างของรางน้ำ: 1 (เพื่อลบระยะขอบล่างระหว่างโมดูล)
  • ความกว้างสูงสุด: 600 พิกเซล (เพื่อให้การออกแบบสอดคล้องกันบนเดสก์ท็อปและแท็บเล็ต)
  • การจัดแนวบรรทัด: กึ่งกลาง
  • ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
  • ล้นแนวนอน: ซ่อน
  • แนวตั้งล้น: ซ่อน
ปรับแต่งพารามิเตอร์บรรทัด Divi

สร้างตัวคั่นสำหรับสีพื้นหลังของข้อความเคลื่อนไหว

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

การแทรกตัวคั่น

จากนั้นเลือกไม่เพื่อแสดงตัวคั่น

แสดง Divi seprator

การตั้งค่าตัวแบ่งพื้นหลัง

อัพเดตตัวคั่นด้วยพื้นหลังไล่ระดับดังนี้:

  • สีพื้นหลังไล่ระดับสีด้านซ้าย: # e02b20
  • สีไล่ระดับสีพื้นหลังด้านขวา: # 8300e9
  • ทิศทางการไล่ระดับสี: 90deg
  • ตำแหน่งเริ่มต้น: 30%
  • ตำแหน่งสุดท้าย: 70%
ตัวแบ่งด้านหลัง Divi

เราต้องการให้ความสูงของตัวคั่นสูงพอที่จะระบายสีข้อความทั้งหมดของเราในโมดูลข้อความและตัวคั่นบนและล่าง สำหรับการออกแบบนี้ตั้งค่าความสูงเป็น 400px

  • ความสูง: 400px
ตัวแบ่งความสูงของตัวแบ่ง

จากนั้นให้ตำแหน่งที่แน่นอนของตัวแบ่งเพื่อวางตำแหน่งเหนือโมดูลอื่น ๆ โดยตรง ใช้ดัชนี Z เพื่อวางตัวแบ่งด้านหลังโมดูลอื่น ๆ

  • ตำแหน่ง: สัมบูรณ์
  • ดัชนี Z: -1
ตัวคั่นดัชนี
เอฟเฟกต์การเลื่อนตัวแบ่งพื้นหลัง

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

อัปเดตรายการต่อไปนี้:

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

สำนัก

  • เปิดใช้งานการเคลื่อนไหวแนวนอน: ใช่
  • เริ่มชดเชย: 6 (ที่ 20%)
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 40% -60%)
  • ส่วนท้ายชดเชย: -6 (ที่ 80%)

โทรศัพท์

  • เริ่มการชดเชย: 3
  • ออฟเซ็ตสิ้นสุด: -3

นอกจากนี้อย่าลืมตั้งค่าทริกเกอร์สำหรับเอฟเฟกต์การเคลื่อนไหวตรงกลางคลิป:

  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
การกำหนดค่าภาพเคลื่อนไหว

เพิ่มระยะห่างส่วน

หากต้องการสร้างพื้นที่เลื่อนชั่วคราวเพื่อทดสอบการออกแบบให้เพิ่มรายการต่อไปนี้ในส่วน:

  • ระยะขอบ: 80vh ด้านบน, 80vh ด้านล่าง
ส่วนขนาดการกำหนดค่า divi

คิดสุดท้าย

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

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

เพื่อสุขภาพของคุณ!