การสร้างแอนิเมชั่นการเลื่อนพื้นหลังข้อความเป็นวิธีพิเศษในการเพิ่มพื้นผิวเคลื่อนไหวที่มีสีสันให้กับข้อความของคุณ เว็บไซต์เว็บ ในขณะที่ผู้ใช้กำลังเลื่อนหน้า กับ Diviกระบวนการนี้ง่ายอย่างน่าประหลาดใจเมื่อคุณเรียนรู้เทคนิคสำคัญสองสามข้อ
ในบทช่วยสอนนี้ เราจะใช้พลังของพารามิเตอร์ในตัวของ . เท่านั้น Divi เพื่อสร้างการออกแบบที่ไม่ซ้ำกัน 3 แบบที่มีภาพเคลื่อนไหวการเลื่อนพื้นหลังข้อความที่มีสีสัน เราจะแสดงให้คุณเห็นถึงวิธีสร้างเวอร์ชันมืดของการออกแบบแต่ละแบบเพื่อให้ได้รูปลักษณ์ใหม่ทั้งหมด
ขอเริ่มต้น!
ผลลัพธ์ที่เป็นไปได้
นี่คือรูปลักษณ์ของการออกแบบที่เราจะสร้างในวันนี้
การออกแบบ 1: การไล่ระดับสีพื้นหลังข้อความพร้อมเอฟเฟกต์เลื่อนแนวนอน
การออกแบบครั้งแรกนี้จะมีเอฟเฟกต์การเลื่อนในแนวนอนที่ทำให้โมดูลตัวคั่นสีเคลื่อนไหวอยู่ด้านหลังโมดูลข้อความด้วยตัวกรองหน้าจอ
เพิ่มคอลัมน์
ในการเริ่มต้นให้เพิ่มแถวหนึ่งคอลัมน์ในส่วนเริ่มต้น
เพิ่มโมดูลข้อความ
จากนั้นเพิ่มโมดูลข้อความใหม่ลงในคอลัมน์
เนื้อหา
สำหรับ เนื้อหา ให้วางโค้ด HTML ต่อไปนี้ลงในช่อง เนื้อหา:
การจัดรูปแบบข้อความ
จากนั้นอัพเดตการออกแบบข้อความดังนี้:
- สีพื้นหลัง: #ffffff
- รูปแบบตัวอักษรข้อความ: TT
- สีข้อความ: # 000000
- ขนาดตัวอักษร: 100 px (เดสก์ท็อป), 40 px (โทรศัพท์)
- เว้นวรรคตัวอักษรข้อความ: 0.15em
- ความสูงของบรรทัดข้อความ: 1em
- การจัดตำแหน่งของข้อความ: ศูนย์
- แบบอักษรของชื่อเรื่อง: Merriweather
- น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
- ลักษณะแบบอักษรของชื่อเรื่อง: TT
- การจัดตำแหน่งข้อความส่วนหัว: กึ่งกลาง
- สีข้อความส่วนหัว: # 000000
- ขนาดข้อความส่วนหัว: 200px (เดสก์ท็อป), 80px (โทรศัพท์)
- ระยะห่างตัวอักษรของชื่อเรื่อง: 0.15em
- ความสูงของบรรทัดหัวเรื่อง: 1em
แพ็ดดิ้งและตัวกรอง
ตอนนี้เราต้องเพิ่มช่องว่างภายในและตัวกรองหน้าจอลงในโมดูลข้อความ จำเป็นต้องใช้ตัวกรองเพื่อให้การออกแบบนี้ทำงานได้เนื่องจากเป็นสิ่งที่อนุญาตให้สีพื้นหลัง / ม็อดแสดงด้านหลังข้อความ
ในการเพิ่มตัวกรองและตัวกรองให้ปรับปรุงรายการต่อไปนี้:
- padding: สูง 15px, ต่ำ 20px
- โหมดผสมผสาน: หน้าจอ
หมายเหตุ: โหมดผสมผสานหน้าจอจะทำงานได้ดีที่สุดกับข้อความสีดำบนพื้นหลังสีขาว หากเราต้องการใช้ข้อความสีขาวบนพื้นหลังสีดำเราจะใช้โหมด Multiply blend
ตัวแยกบนและล่าง
เมื่อโมดูลข้อความของเราเสร็จสมบูรณ์แล้วให้เพิ่มตัวคั่น (ด้านบนและด้านล่างโมดูลข้อความ) สำหรับองค์ประกอบการออกแบบเพิ่มเติม
เพิ่มตัวคั่นที่ต่ำกว่า
เพิ่มโมดูลการแยกใหม่ภายใต้โมดูลข้อความ
การตั้งค่าการแยกที่สูงขึ้น
เปิดการตั้งค่าตัวแยกและเลือกไม่เพื่อแสดงตัวแยก
จากนั้นอัปเดตพื้นหลังและให้ตัวแบ่งโหมดผสมผสานเช่นเดียวกับโมดูลข้อความดังนี้:
- สีพื้นหลังไล่ระดับสีด้านซ้าย: # 000000
- สีพื้นหลังไล่ระดับสีทางด้านขวา: #ffffff
- ทิศทางการไล่ระดับสี: 90deg
- ตำแหน่งเริ่มต้น: 48%
- ตำแหน่งสุดท้าย: 0%
- โหมดผสมผสาน: หน้าจอ
จากนั้นอัปเดตความสูงของตัวแบ่งบนหน้าจอโทรศัพท์ดังนี้:
- ความสูง: 15px (โทรศัพท์)
เพิ่มตัวคั่นด้านบน
ในการสร้างตัวแบ่งด้านบนให้ทำซ้ำตัวแบ่งด้านล่างก่อนหน้านี้แล้วลากไปเหนือโมดูลข้อความโดยใช้พื้นที่แสดงเลเยอร์
จากนั้นสลับสีบนพื้นหลังไล่ระดับสี
อัพเดตพารามิเตอร์บรรทัด
เมื่อมีตัวคั่นบนและล่างของเราเข้าที่แล้วให้อัปเดตพารามิเตอร์บรรทัดดังนี้:
- ความกว้างของรางน้ำ: 1 (เพื่อลบระยะขอบล่างระหว่างโมดูล)
- ความกว้างสูงสุด: 600 พิกเซล (เพื่อให้การออกแบบสอดคล้องกันบนเดสก์ท็อปและแท็บเล็ต)
- การจัดแนวบรรทัด: กึ่งกลาง
- ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
- ล้นแนวนอน: ซ่อน
- แนวตั้งล้น: ซ่อน
สร้างตัวคั่นสำหรับสีพื้นหลังของข้อความเคลื่อนไหว
องค์ประกอบสุดท้ายของการออกแบบชิ้นแรกนี้คือตัวแบ่งที่เราจะใช้เพื่อทำให้สีพื้นหลังของข้อความบนเลื่อนเคลื่อนไหว ในการดำเนินการนี้ให้เพิ่มโมดูลการแยกใหม่ใต้ตัวแบ่งด้านล่าง
จากนั้นเลือกไม่เพื่อแสดงตัวคั่น
การตั้งค่าตัวแบ่งพื้นหลัง
อัพเดตตัวคั่นด้วยพื้นหลังไล่ระดับดังนี้:
- สีพื้นหลังไล่ระดับสีด้านซ้าย: # e02b20
- สีไล่ระดับสีพื้นหลังด้านขวา: # 8300e9
- ทิศทางการไล่ระดับสี: 90deg
- ตำแหน่งเริ่มต้น: 30%
- ตำแหน่งสุดท้าย: 70%
เราต้องการให้ความสูงของตัวคั่นสูงพอที่จะระบายสีข้อความทั้งหมดของเราในโมดูลข้อความและตัวคั่นบนและล่าง สำหรับการออกแบบนี้ตั้งค่าความสูงเป็น 400px
- ความสูง: 400px
จากนั้นให้ตำแหน่งที่แน่นอนของตัวแบ่งเพื่อวางตำแหน่งเหนือโมดูลอื่น ๆ โดยตรง ใช้ดัชนี Z เพื่อวางตัวแบ่งด้านหลังโมดูลอื่น ๆ
- ตำแหน่ง: สัมบูรณ์
- ดัชนี Z: -1
เอฟเฟกต์การเลื่อนตัวแบ่งพื้นหลัง
เมื่อตัวคั่นอยู่ในตำแหน่ง สิ่งที่เราต้องทำคือย้ายตัวคั่นด้านหลังข้อความโดยใช้เอฟเฟกต์การเลื่อนของ Divi. สำหรับการออกแบบนี้ เราจะเพิ่มการเคลื่อนไหวในแนวนอนให้กับสกรอลล์
อัปเดตรายการต่อไปนี้:
ภายใต้แท็บการเคลื่อนไหวในแนวนอน ...
สำนัก
- เปิดใช้งานการเคลื่อนไหวแนวนอน: ใช่
- เริ่มชดเชย: 6 (ที่ 20%)
- ค่าชดเชยเฉลี่ย: 0 (ที่ 40% -60%)
- ส่วนท้ายชดเชย: -6 (ที่ 80%)
โทรศัพท์
- เริ่มการชดเชย: 3
- ออฟเซ็ตสิ้นสุด: -3
นอกจากนี้อย่าลืมตั้งค่าทริกเกอร์สำหรับเอฟเฟกต์การเคลื่อนไหวตรงกลางคลิป:
- ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
เพิ่มระยะห่างส่วน
หากต้องการสร้างพื้นที่เลื่อนชั่วคราวเพื่อทดสอบการออกแบบให้เพิ่มรายการต่อไปนี้ในส่วน:
- ระยะขอบ: 80vh ด้านบน, 80vh ด้านล่าง
คิดสุดท้าย
การออกแบบแอนิเมชั่นพื้นหลังข้อความที่แสดงในบทความนี้จะใช้งานได้ดีในรูปแบบคงที่โดยไม่ต้องเพิ่มการเคลื่อนไหวในการเลื่อน อย่างไรก็ตามเอฟเฟกต์การเลื่อนเพิ่มเติมจะนำการออกแบบไปสู่ระดับใหม่ทั้งหมด อย่าลังเลที่จะทดลองกับสีและเอฟเฟกต์เพิ่มเติม!
ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น
เพื่อสุขภาพของคุณ!