วิธีทำให้ภาพพื้นหลังพารัลแลกซ์เคลื่อนไหวด้วยเอฟเฟกต์การเลื่อนของ Divi

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

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

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

แอบมอง

ดาวน์โหลดเค้าโครงภาพพื้นหลัง Parallax แบบเคลื่อนไหวได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

การสร้างภาพพื้นหลัง Parallax แบบเคลื่อนไหวด้วยเอฟเฟกต์การเลื่อนของ Divi

การเพิ่มคอลัมน์

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

การสร้างโมดูลข้อความ

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

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

เพิ่มตัวอักษร "p" ลงในเนื้อหา

เพิ่มภาพพื้นหลังพารัลแลกซ์ให้กับโมดูลข้อความ

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

• ภาพพื้นหลัง: แทรกรูปภาพ
• ใช้เอฟเฟกต์พารัลแลกซ์: ใช่
• วิธีพารัลแลกซ์: CSS

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: #ffffff
• ขนาดข้อความ: 100px (เดสก์ท็อป), 70px (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: 5px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1em
• การจัดตำแหน่งข้อความ: center
• ช่องว่างภายใน: บน 250px ด้านล่าง 250px

ช่องว่างภายในคือสิ่งที่สร้างความสูงที่จำเป็นในการแสดงภาพพื้นหลังพารัลแลกซ์

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

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%

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

จากนั้นคลิกเพื่อเปิดการตั้งค่าคอลัมน์

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

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

• เปิดใช้งานแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: -2 (ที่วิวพอร์ต 0%)
• ออฟเซ็ตกลาง: 0 (ที่ 40% -60%)
• ออฟเซ็ตสิ้นสุด: -2 (ที่ 100%)

ภายใต้แท็บเอฟเฟกต์การหมุน…

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: 20deg (ที่วิวพอร์ต 0%)
• การหมุนกลาง: 0deg (ที่ 40% -60%)
• สิ้นสุดการหมุน: -20deg (ที่ 100%)

การสร้างคอลัมน์2

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

ทำซ้ำทั้งคอลัมน์แรก (ด้วยโมดูลข้อความ) เพื่อสร้างคอลัมน์ที่สอง

กำลังอัปเดตเอฟเฟกต์การเลื่อนคอลัมน์ 2

จากนั้นอัปเดตเอฟเฟกต์การเลื่อนสำหรับคอลัมน์ 2 ดังนี้:

ภายใต้แท็บเอฟเฟกต์การหมุน…

• การหมุนเริ่มต้น: -20deg
• สิ้นสุดการหมุน: 20deg

การสร้างคอลัมน์ 3

ในการสร้างคอลัมน์ 3 ให้ทำซ้ำคอลัมน์ 2

กำลังอัปเดตเอฟเฟกต์การเลื่อนคอลัมน์ 3

จากนั้นอัปเดตการตั้งค่าคอลัมน์ 3 ดังนี้:

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

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: NO

ภายใต้แท็บเอฟเฟกต์การหมุน…

• การหมุนเริ่มต้น: 20deg
• สิ้นสุดการหมุน: 10deg

การสร้างคอลัมน์ 4

หากต้องการสร้างคอลัมน์ 4 ให้ทำซ้ำคอลัมน์ 2 แล้วลากไปที่ด้านล่าง

กำลังอัปเดตเอฟเฟกต์การเลื่อนคอลัมน์ 4

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

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

• ออฟเซ็ตเริ่มต้น: 2
• ออฟเซ็ตสิ้นสุด: 2

ภายใต้แท็บเอฟเฟกต์การหมุน…

• การหมุนเริ่มต้น: -15deg
• สิ้นสุดการหมุน: 20deg

การสร้างคอลัมน์ 5

สุดท้าย เพื่อสร้างคอลัมน์ 5 ทำซ้ำคอลัมน์ 4

กำลังอัปเดตเอฟเฟกต์การเลื่อนคอลัมน์ 5

จากนั้นอัปเดตการตั้งค่าคอลัมน์ 5 ดังนี้:

ภายใต้แท็บเอฟเฟกต์การหมุน…

• การหมุนเริ่มต้น: 15deg
• สิ้นสุดการหมุน: -15deg

การอัปเดตตัวอักษรโมดูลข้อความ

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

กำลังอัปเดตการออกแบบโมดูลข้อความกลาง

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

• แบบอักษรของข้อความ: Montserrat Subrayada
• สีข้อความ: #e0e722
• ขนาดข้อความ: 150px (เดสก์ท็อป)
• ความสูงของบรรทัดข้อความ: 100px

อัปเดตเนื้อหาโมดูลข้อความแรกสำหรับมือถือ

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

เนื้อหาบนแท็บเล็ตและโทรศัพท์:

<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>

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

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

• มุมโค้งมน (เดสก์ท็อป): 100% บนซ้าย
• มุมโค้งมน (แท็บเล็ตและโทรศัพท์): 40% บนซ้าย, 40% ล่างขวา

ใต้แท็บขั้นสูง เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในการแสดงผลแท็บเล็ตขององค์ประกอบหลัก:

width: 100% !important;

เพื่อให้แน่ใจว่าคอลัมน์จะขยายเต็มความกว้างของแถวบนจอแสดงผลแท็บเล็ตและโทรศัพท์

ซ่อนคอลัมน์ที่เหลือบนแท็บเล็ตและหน้าจอโทรศัพท์

ตอนนี้คอลัมน์ 1 จะขยายเต็มความกว้างของแถวบนแท็บเล็ตและโทรศัพท์ เราสามารถซ่อน/ปิดใช้งานคอลัมน์ที่เหลือในแท็บเล็ตและโทรศัพท์ได้ ในการดำเนินการนี้ ให้เปิดการตั้งค่าสำหรับคอลัมน์ 2-5 และปิดการมองเห็นของแต่ละคอลัมน์บนโทรศัพท์และแท็บเล็ต

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

จากนั้นเปิดการตั้งค่าคอลัมน์ 5 และเพิ่มมุมโค้งมนเสริมดังนี้:

• มุมโค้งมน (เดสก์ท็อป): 100% ล่างขวา

การเพิ่มการออกแบบพื้นหลังให้กับ Section

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

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

• รูปแบบตัวแบ่งด้านบน: ดูภาพหน้าจอ
• ตัวแบ่งสีด้านบน: #222222
• ความสูงของตัวแบ่งด้านบน: 650px (เดสก์ท็อป), 500px (แท็บเล็ตและโทรศัพท์)

• สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
• ตัวแบ่งสีด้านล่าง: #222222
• ความสูงของตัวแบ่งด้านล่าง: 500px (เดสก์ท็อป), 400px (แท็บเล็ตและโทรศัพท์)

ผลสุดท้าย

Hre คือการออกแบบขั้นสุดท้ายบนเดสก์ท็อป

และนี่คือการออกแบบทางเลือกบนแท็บเล็ตและหน้าจอโทรศัพท์

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

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

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

ไชโย!