วิธีรวมแอนิเมชั่นและพารัลแลกซ์ใน Divi เพื่อการออกแบบที่ไม่เหมือนใคร

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

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

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

แอบมอง

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

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
3. รูปภาพที่จะใช้สำหรับเนื้อหาจำลอง คุณสามารถค้นหารูปภาพที่ใช้สำหรับบทช่วยสอนนี้ใน Life Coach Divi Layout Pack

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

แนวคิดพื้นฐาน

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

ส่วนที่ 1: การสร้าง Divi Animation และ Parallax Design (เวอร์ชัน 1)

สร้างส่วนใหม่ด้วยแถวสองคอลัมน์ (1/2 1/2)

ก่อนที่เราจะเพิ่มโมดูลของเรา เรามาทำการปรับเปลี่ยนส่วนและแถวกันก่อน

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

ขั้นแรก เปิดการตั้งค่าส่วนและนำช่องว่างภายในเริ่มต้นออกดังนี้:

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

จากนั้นเปิดการตั้งค่าแถวและกำหนดภาพพื้นหลังพารัลแลกซ์ให้แถวนั้น

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

ที่นี่ต้องตั้งค่าวิธีพารัลแลกซ์เป็น CSS เพื่อให้การออกแบบทำงานได้

ความกว้าง: 100%
ความกว้างสูงสุด: 100%
Padding: บน 10vw, 10vw ซ้าย, 10vw ขวา

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

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

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

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

เนื้อหาในร่างกาย:

<p>Hi!<br>I'm Jane...</p>

<a href="#">about me</a>

จากนั้นให้โมดูลข้อความมีภาพพื้นหลังพารัลแลกซ์ css เดียวกันกับที่คุณเพิ่มในแถว

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

แบบอักษรข้อความ: Fira Sans
น้ำหนักแบบอักษรของข้อความ: เบา
สีข้อความ: #ffffff
ขนาดข้อความ: 70px
ความสูงของบรรทัดข้อความ: 1em

ลักษณะแบบอักษรของลิงก์: ขีดเส้นใต้ (U)
สีของข้อความลิงก์: #ffffff (ค่าเริ่มต้น), #881e67 (โฮเวอร์)
ขนาดข้อความลิงก์: 30px
ระยะห่างระหว่างตัวอักษรของลิงก์: 2px

ช่องว่างภายใน: บน 20%, ล่าง 20%, ซ้าย 10%, ขวา 10%

ความกว้างของเส้นขอบ: 20px
สีเส้นขอบ: #ffffff

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

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

มาดูเอฟเฟกต์กันเลยดีกว่า…

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

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

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

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

จากนั้นอัปเดตเนื้อหาเนื้อหาด้วยคำว่า "บล็อกของฉัน"

จากนั้นเพิ่มภาพพื้นหลังด้วยวิธีพารัลแลกซ์ที่แท้จริง

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

แบบอักษรข้อความ: Fira Mono
รูปแบบตัวอักษรของข้อความ: TT
การจัดตำแหน่งข้อความ: center
สีข้อความ: #ffffff
ระยะห่างของตัวอักษรข้อความ: 10px
ความกว้าง: 320px
ความกว้างสูงสุด: 320px
การจัดตำแหน่งโมดูล: ศูนย์

ขอบ: (เดสก์ท็อป): -5vw บน, 4vw ล่าง
Margin (แท็บเล็ตและโทรศัพท์): 3vw top
ช่องว่างภายใน: บน 70px ด้านล่าง 70px

ความกว้างของเส้นขอบ: 20px
สีเส้นขอบ: #ffffff

สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ลง
ภาพเคลื่อนไหวล่าช้า: 200ms

การสร้างโมดูลข้อความที่สามด้วยภาพพื้นหลังพารัลแลกซ์ใหม่

ในการสร้างโมดูลข้อความที่สาม ให้ทำซ้ำโมดูลข้อความที่คุณเพิ่งสร้างขึ้นในคอลัมน์ 2

จากนั้นเราจะเก็บภาพพื้นหลังไว้เหมือนเดิม แต่เราจะอัปเดตเอฟเฟกต์พารัลแลกซ์ด้วยเมธอด CSS พารัลแลกซ์

ความกว้าง: 240px
ความกว้างสูงสุด: 240px
การจัดตำแหน่งโมดูล: ซ้าย
ระยะขอบ: 0px ด้านล่าง
ช่องว่างภายใน: ด้านบน 170px, ด้านล่าง 170px, ด้านซ้าย 95px, ด้านขวา 95px

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

จากนั้นอัปเดตทิศทางของแอนิเมชันเป็นขึ้นแทนที่จะลง

ทิศทางของแอนิเมชั่น: UP

ผลสุดท้าย

ตอนนี้เรามาดูผลลัพธ์สุดท้ายกัน

ส่วนที่ 2: การสร้างแอนิเมชั่นและการออกแบบพารัลแลกซ์ (เวอร์ชัน 2)

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

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

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

ถัดไป อัปเดตการตั้งค่าสำหรับแถวบนสุดดังนี้:

ความสูง: 900px (เดสก์ท็อป), 2000px (แท็บเล็ตและโทรศัพท์)
ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ขวา
ภาพเคลื่อนไหว Duration: 1250ms
ภาพเคลื่อนไหวล่าช้า: 1800ms

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

ทับซ้อนกันสองแถว

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

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

ขอบ: -900px ด้านบน (เดสก์ท็อป), -2000px (แท็บเล็ตและโทรศัพท์)

จากนั้นนำภาพพื้นหลังออกด้วยวิธี css parallax สำหรับแถว เนื่องจากเราจะใช้ภาพพื้นหลังแถวบนสุดแทน

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

การเพิ่มสีพื้นหลังของส่วน

เพื่อให้โมดูลข้อความมีสีพื้นหลังเริ่มต้นก่อนภาพเคลื่อนไหวแถว คุณสามารถกำหนดสีพื้นหลังให้กับส่วนนั้นได้

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

พื้นหลังไล่ระดับสีซ้าย: rgba(136,30,103,0.61)
พื้นหลังไล่ระดับสีขวา: #881e67
ประเภทการไล่ระดับสี: เรเดียล

ผลสุดท้าย

ตอนนี้เรามาดูผลลัพธ์สุดท้ายกัน

โหมดผสมผสานที่เป็นตัวเลือกและคำสั่งผสมแอนิเมชั่น

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

โหมดผสมผสาน: ความส่องสว่าง
สไตล์แอนิเมชั่น: Zoom

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

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

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

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

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

ไชโย!