วิธีสร้างแอนิเมชั่นที่ทับซ้อนกันใน Delay ด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

เข้าใกล้

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

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

เพิ่มมาตราใหม่

สีพื้นหลัง

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

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

เพิ่มแถว #1

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

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนของคุณโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

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

เพิ่มเนื้อหา H2

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

การตั้งค่าข้อความ H2

จากนั้นไปที่แท็บออกแบบและแก้ไขการตั้งค่าข้อความ H2

• หัวข้อที่ 2 แบบอักษร: Poppins
• หัวเรื่อง 2 สีข้อความ: #333333
• หัวเรื่อง 2 ขนาดข้อความ: 5vw

ระยะห่าง

สร้างช่องว่างที่คุณต้องการโดยใช้ช่องว่างภายในด้านซ้ายและขวาในการตั้งค่าระยะห่าง

• ช่องว่างภายในด้านซ้าย: 15vw
• ช่องว่างภายในด้านขวา: 39vw

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ไม่

สีพื้นหลัง

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

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

ระยะห่าง

ดำเนินการต่อโดยให้โมดูลตัวแบ่งมีขนาดใหญ่ขึ้นโดยเพิ่มช่องว่างด้านบนและด้านล่างในการตั้งค่าระยะห่าง

• แผ่นรองด้านบน: 9vw
• แผ่นรองด้านล่าง: 9vw

แอนิเมชั่น

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

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

เพิ่มแถว #2

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

ต่อแถวสอง! เลือกโครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอ

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

จากนั้น เพิ่มช่องว่างภายในที่ด้านซ้ายและด้านขวาของแถวในการตั้งค่าการเว้นวรรค

• Padding ซ้าย: 10vw (เดสก์ท็อป), 2vw (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 10vw (เดสก์ท็อป), 2vw (แท็บเล็ตและโทรศัพท์)

แสดง

นอกจากนี้ เรายังทำให้แน่ใจว่าคอลัมน์ต่างๆ จะปรากฏติดกันบนหน้าจอขนาดเล็กโดยการเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของแถว

display: flex;

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เพิ่มเนื้อหา

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูล Blurb ในคอลัมน์ 1 และป้อนเนื้อหาที่คุณเลือก

เลือกไอคอน

ดำเนินการต่อโดยเลือกไอคอนที่คุณต้องการ

การตั้งค่าไอคอน

แก้ไขลักษณะที่ปรากฏของไอคอนของคุณต่อไป

• สีไอคอน: #dbd6bd
• ไอคอนวงกลม: ใช่
• ไอคอนวงกลม: #ffffff
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 2.5vw (เดสก์ท็อป), 1.7vw (แท็บเล็ต), 1.9vw (โทรศัพท์)

การตั้งค่าข้อความชื่อเรื่อง

เปลี่ยนการตั้งค่าข้อความชื่อเรื่องด้วย

• แบบอักษรของชื่อ: Source Serif Pro
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ขนาดข้อความชื่อเรื่อง: 1.7vw (เดสก์ท็อป), 2.1vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 1.9em

การตั้งค่าข้อความเนื้อหา

พร้อมกับการตั้งค่าข้อความเนื้อหา

• แบบอักษรของร่างกาย: เปิด Sans
• การจัดตำแหน่งข้อความเนื้อหา: กึ่งกลาง
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.2vw (แท็บเล็ต), 1.6vw (โทรศัพท์)
• ความสูงของเส้นร่างกาย: 2.5em

ขนาด

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

• ความกว้าง: 91.7%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

นอกจากนี้เรายังจะเพิ่มพื้นที่พิเศษให้กับโมดูลโดยใช้ค่าช่องว่างภายในที่กำหนดเอง

• ช่องว่างภายในด้านบน: 2vw
• แผ่นรองด้านล่าง: 2vw
• ช่องว่างภายในด้านซ้าย: 1vw
• ช่องว่างภายในด้านขวา: 1vw

ชายแดน

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

• ความกว้างของเส้นขอบ: 1px
• สีเส้นขอบ: #333333

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ภาพเคลื่อนไหวซ้ำ: Once
• ทิศทางของแอนิเมชั่น: ขึ้น
• ระยะเวลาแอนิเมชั่น: 1000ms
• ภาพเคลื่อนไหวล่าช้า: 2000ms
• ความเข้มของแอนิเมชั่น: 16%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 0%

โคลนโมดูล Blurb สองครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

เปลี่ยนแอนิเมชั่นของซ้ำ #1

เปลี่ยนการหน่วงเวลาภาพเคลื่อนไหวของรายการที่ซ้ำกันครั้งแรก

• ภาพเคลื่อนไหวล่าช้า: 2200ms

เปลี่ยนแอนิเมชั่นของซ้ำ #2

จากนั้นเปิดสำเนาที่สองและเปลี่ยนการหน่วงเวลาของภาพเคลื่อนไหวที่นั่นด้วย

• ภาพเคลื่อนไหวล่าช้า: 2400ms

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 3

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ไม่

สีพื้นหลัง

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

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

ระยะห่าง

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

• ระยะขอบซ้าย: -60vw (เดสก์ท็อป), -64vw (แท็บเล็ตและโทรศัพท์)
• ด้านบน: 17vw (เดสก์ท็อป), 27vw (แท็บเล็ต), 30vw (โทรศัพท์)
• ช่วงล่าง: 17vw (เดสก์ท็อป), 27vw (แท็บเล็ต), 34vw (โทรศัพท์)

แอนิเมชั่น

สุดท้ายแต่ไม่ท้ายสุด เพิ่มภาพเคลื่อนไหวที่ล่าช้า

• สไตล์แอนิเมชั่น: สไลด์
• ภาพเคลื่อนไหวซ้ำ: Once
• ทิศทางของแอนิเมชั่น: ขวา
• ระยะเวลาของแอนิเมชั่น: 650ms
• ภาพเคลื่อนไหวล่าช้า: 4500ms
• ความเข้มของแอนิเมชั่น: 24%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 0%

โคลนแถว #2

เมื่อคุณเสร็จสิ้นแถวที่สองและโมดูลทั้งหมดแล้ว คุณสามารถดำเนินการต่อและโคลนได้

ลบโมดูลตัวแบ่งในแถวใหม่

ลบโมดูลตัวแบ่งในแถวที่ซ้ำกัน

เปลี่ยนความล่าช้าของแอนิเมชั่นของ Blurb Module #1

จากนั้นเปิดโมดูล Blurb แรกและเปลี่ยนการหน่วงเวลาของภาพเคลื่อนไหว

• ภาพเคลื่อนไหวล่าช้า: 5200ms

เปลี่ยนความล่าช้าของแอนิเมชันของ Blurb Module #2

ทำสิ่งเดียวกันสำหรับ Blurb Module ในคอลัมน์ 2

• ภาพเคลื่อนไหวล่าช้า: 5400ms

เปลี่ยนความล่าช้าของแอนิเมชั่นของ Blurb Module #3

และแก้ไขการหน่วงเวลาของภาพเคลื่อนไหวสำหรับ Blurb Module ในคอลัมน์ 3 ด้วยเช่นกัน

• ภาพเคลื่อนไหวล่าช้า: 5600ms

เพิ่มคาบเกี่ยวกัน

เพิ่มคาบเกี่ยวกันให้กับโมดูลตัวแบ่ง #1

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

• ขอบบน: -15vw

เพิ่มการทับซ้อนกับแถว #2

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

• อัตรากำไรขั้นต้น: -10vw

เพิ่มคาบเกี่ยวกันให้กับโมดูล Blurb ในแถว #2

เปิดโมดูล Blurb แต่ละโมดูลในแถวที่สอง และเพิ่มค่าระยะขอบที่กำหนดเองบางค่าลงไป

• อัตรากำไรขั้นต้น: -10vw
• ระยะขอบล่าง: 7vw

เพิ่มคาบเกี่ยวกันให้กับโมดูลตัวแบ่ง #2

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

• ขอบบน: -35vw (เดสก์ท็อป), -47vw (แท็บเล็ต), -72vw (โทรศัพท์)

เพิ่มการทับซ้อนกับแถว #3

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

• อัตรากำไรขั้นต้น: -10vw

เพิ่มคาบเกี่ยวกันให้กับโมดูล Blurb ในแถว #3

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

• ขอบบน: -22vw (เดสก์ท็อป), -46vw (แท็บเล็ต), -70vw (โทรศัพท์)
• ระยะขอบล่าง: 7vw

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

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