วิธีสร้าง Parallax Copy Transitions ด้วย Divi's Sticky Options

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

https://youtu.be/uZCD0__Apjk

สมัครสมาชิกช่อง Youtube ของเรา

1. สร้างโครงสร้างองค์ประกอบ

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

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

เพิ่มแถวใหม่

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

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

ขนาด

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

• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 95%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

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

ภาพพื้นหลังของคอลัมน์

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

อัปโหลดภาพพื้นหลังและเปิดใช้เอฟเฟกต์พารัลแลกซ์

• ใช้เอฟเฟกต์พารัลแลกซ์: ใช่
• วิธีพารัลแลกซ์: CSS

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

ถัดไป ไปที่แท็บการออกแบบ และใช้ช่องว่างภายในที่กำหนดเอง

• แผ่นรองด้านล่าง: 50vh

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

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

เวลาในการเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความที่มีเนื้อหา H2 ที่คุณเลือก

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

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

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• รูปแบบตัวอักษรของหัวเรื่อง 2: ตัวพิมพ์ใหญ่
• หัวเรื่อง 2 สีข้อความ: #ffffff
• หัวเรื่อง 2 ขนาดข้อความ:
  • เดสก์ท็อป: 9vw
  • แท็บเล็ต: 14vw
  • โทรศัพท์: 15vw

ตัวกรอง

เรากำลังเปิดใช้งานโหมดผสมผสานในการตั้งค่าตัวกรองด้วย

• โหมดผสมผสาน: โอเวอร์เลย์

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

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

เพิ่มลิงค์

ถัดไป ใส่ลิงค์

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ตและโทรศัพท์: 7vw
• สีข้อความของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 0.06vw

• แบบอักษรของปุ่ม: Karla
• แสดงไอคอนปุ่ม: ใช่
• ตำแหน่งไอคอนปุ่ม: ซ้าย
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: ไม่

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างแบบกำหนดเองด้วย

• ช่องว่างภายในด้านบน: 8%
• แผ่นรองด้านล่าง: 8%

ตำแหน่ง

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

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างขวา

2. ขั้นตอนที่จำเป็นสำหรับเอฟเฟกต์

เปลี่ยนโมดูลข้อความ Sticky

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

• ตำแหน่งติดหนึบ: Stick to Top
• ออฟเซ็ตติดหนึบ: 150px
• ขีด จำกัด ติดหนึบด้านล่าง: Section
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: ใช่
• รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบติดหนึบ: ใช่

แก้ไขระยะห่างโมดูลข้อความ

ค่าเริ่มต้น

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

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: -10vw
  • แท็บเล็ต: -14vw
  • โทรศัพท์: -15vw

เหนียว

เมื่อโมดูลข้อความกลายเป็นแบบติดหนึบแล้ว เราต้องการให้กลับมาแสดงอีกครั้ง เพื่อให้แน่ใจว่าสิ่งนี้จะเกิดขึ้น เราจะนำระยะขอบด้านบนนี้กลับมาที่ “0vh” ในสถานะติดหนึบ

• ขอบบนเหนียว: 0vh

ระยะห่างมาตรา

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

• ช่องว่างภายในด้านบน: 10vh
• ช่องว่างภายใน: 10vh

โคลนทั้งส่วนได้มากเท่าที่ต้องการ

เมื่อคุณออกแบบส่วนเสร็จแล้ว คุณสามารถโคลนได้มากเท่าที่คุณต้องการ

เปลี่ยนเนื้อหาและลิงก์

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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