วิธีสร้างภาพเคลื่อนไหวที่ราบรื่นโดยใช้การจับภาพแบบเลื่อนบน Divi

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

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

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

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

1. สร้างหน้าใหม่และเริ่มออกแบบส่วนแรก

เพิ่มหน้าใหม่และเปลี่ยนเป็น Visual Builder

เริ่มต้นด้วยการเพิ่มหน้าใหม่ ป้อนชื่อเพจเผยแพร่เพจและเปลี่ยนเป็น Visual Builder

การตั้งค่ามาตรา

ปรับขนาด

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

• ความสูงขั้นต่ำ: 100vh

องค์ประกอบหลัก

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

scroll-snap-align: start; scroll-snap-stop: ปกติ;

ความชัดเจน

เพื่อให้แน่ใจว่าไม่มีอะไรเกินคอนเทนเนอร์ส่วนเราจะซ่อนส่วนล้น

• ล้นแนวนอน: ซ่อน
• แนวตั้งล้น: ซ่อน

เพิ่มบรรทัด # 1

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

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

ปรับขนาด

โดยไม่ต้องเพิ่มโมดูลใด ๆ เปิดการตั้งค่าแถวและปรับขนาดดังนี้:

• ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

การเว้นวรรค

เรากำลังนำการเพิ่มส่วนบนและด้านล่างเริ่มต้นของส่วนออกเช่นกัน

• Padding ยอดนิยม: 0px
• ช่องว่างภายในด้านล่าง: 0px

ตำแหน่ง

และเราจะจัดตำแหน่งแถวใหม่ตามลำดับ:

• ตำแหน่ง: สัมบูรณ์
• สถานที่: Bottom Center

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

ปล่อยให้กล่องเนื้อหาว่างเปล่า

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

สีพื้นหลัง

จากนั้นเปลี่ยนสีพื้นหลัง

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

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

เราจะลบความสูงของบรรทัดข้อความของโมดูลด้วย

• ความสูงบรรทัดข้อความ: 1em

การกำหนดขนาด

จากนั้นเราจะไปที่การตั้งค่าขนาดและเปลี่ยนความกว้าง

• ความกว้าง: 30%

การเว้นวรรค

เราจะเปลี่ยนโมดูลเป็นสี่เหลี่ยมจัตุรัสโดยเพิ่มการเติมด้านบนบางส่วนเช่นกัน

• ช่องว่างภายในยอดนิยม: 30%

เพิ่มแถว # 2

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

ในบรรทัดถัดไป ใช้โครงสร้างคอลัมน์ต่อไปนี้:

ปรับขนาด

โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าขนาดในแท็บออกแบบ:

• ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 60vw
• ความกว้างสูงสุด: 100%

การเว้นวรรค

จากนั้นเพิ่มระยะขอบบนที่กำหนดเองบนหน้าจอขนาดต่างๆ

• ระยะขอบบน: 20vh (เดสก์ท็อป), 5vw (แท็บเล็ตและโทรศัพท์)

ระยะห่างคอลัมน์ 2

จากนั้นเราจะเปิดการตั้งค่าในคอลัมน์ 2 และเพิ่มค่าการเติมที่กำหนดเอง

• padding บน: 2vh (แท็บเล็ตและโทรศัพท์)
• การซ้อนด้านซ้าย: 2vw
• ช่องว่างภายในที่เหมาะสม: 2vw

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

ลงรูปตนเอง

ถึงเวลาเพิ่มม็อดเพิ่มม็อดรูปภาพในคอลัมน์ 1 แล้วอัปโหลดรูปภาพที่คุณต้องการ

ปรับขนาด

จากนั้นเราจะบังคับให้เต็มความกว้างของโมดูล

• บังคับให้เต็มความกว้าง: ใช่

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

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

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

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

ไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความ H2 ดังนี้:

• หัวเรื่อง 2 แบบอักษร: Anton
• รายการ 2 ขนาดตัวอักษร: 5vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 9vw (โทรศัพท์)

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

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

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

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

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

• แบบอักษรของข้อความ: เปิด Sans
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ความสูงบรรทัดข้อความ: 1,8 em

การเว้นวรรค

และเพิ่มระยะขอบบนและล่างแบบกำหนดเองในการตั้งค่าระยะห่าง

• ขอบบน: 2vw
• ขอบล่าง: 2vw

เพิ่มโมดูลปุ่มไปยังคอลัมน์ 2

เพิ่มสำเนา

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

การตั้งค่าปุ่ม

จัดสไตล์ปุ่มตาม:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: # 333333
• สีเส้นขอบของปุ่ม: # 333333
• รัศมีของปุ่ม: 1px

• แบบอักษรของปุ่ม: Anton
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

การเว้นวรรค

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

• อัตรากำไรขั้นต้นภายในสูง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• มาร์จิ้นภายในต่ำ: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ระยะขอบภายในซ้าย: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
• อัตรากำไรอินเทอร์เน็ตขวา: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)

2. เพิ่มเอฟเฟกต์การเลื่อนให้กับองค์ประกอบต่างๆ

โมดูลข้อความในบรรทัด # 1

ภาพเคลื่อนไหวแนวตั้ง

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

• เปิดใช้งานการเคลื่อนที่ในแนวตั้ง: ใช่
• เริ่มออฟเซ็ต: 4
• กลางออฟเซ็ต: 0
• การสิ้นสุดออฟเซ็ต: -4
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ

บรรทัด # 2

คอลัมน์ 1

ภาพเคลื่อนไหวแนวนอน

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

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• เริ่มชดเชย: -3
• การชดเชยเฉลี่ย: 0 (จาก 40% ถึง 60%)
• ออฟเซ็ตสิ้นสุด: -3
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

จางเข้าและออก

นอกจากนี้เรายังใช้เอฟเฟกต์เฟดเข้าและเฟดเอาต์กับคอลัมน์เดียวกันนั้นด้วย

• เปิดใช้งานจางหายไป: ใช่
• ความทึบเริ่มแรก: 0%
• ความทึบแสงเฉลี่ย: 100%
• ความทึบสุดท้าย: 100%
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

คอลัมน์ 2

การเคลื่อนไหวในแนวนอน

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

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• เริ่มการชดเชย: 3
• การชดเชยเฉลี่ย: 0 (จาก 40% ถึง 60%)
• ออฟเซ็ตสิ้นสุด: 3
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

จางเข้าและออก

พร้อมเอฟเฟกต์จางหายเข้าและออก

• เปิดใช้งานจางหายไป: ใช่
• ความทึบเริ่มแรก: 0%
• ความทึบแสงเฉลี่ย: 100%
• ความทึบสุดท้าย: 100%
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

4. นำส่วนแรกมาใช้ซ้ำ

โคลนส่วนสี่ครั้ง

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

เปลี่ยนสีพื้นหลังของส่วนอื่น ๆ ทั้งหมด

เราจะเปลี่ยนสีพื้นหลังของส่วนอื่น ๆ ทั้งหมด

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

5. เพิ่มรหัส CSS เพื่อเปิดใช้งานการจับภาพเลื่อนในหน้า HTML

เพิ่มโมดูลรหัสในส่วนสุดท้ายของหน้า

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

ใส่รหัส HTML CSS

บรรทัดโค้ด CSS เหล่านี้จะช่วยให้เราใช้การจัดตำแหน่งแบบเลื่อนกับโค้ด HTML ของเพจของเรา:

<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>

เพิ่ม Scroll Snapping Start ไปที่ Header and Footer

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

ส่วนหัว, ส่วนท้าย {scroll-snap-align: start;}

จะเสร็จสิ้น

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

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