วิธีเปลี่ยนการออกแบบของคุณด้วย Scroll Velocity โดยใช้ Divi & GSAP

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

ไปกันเถอะ

ดูตัวอย่าง

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

แนวตั้งเอียง

เดสก์ทอป

มือถือ

แนวนอนเอียง

เดสก์ทอป

มือถือ

หมุน

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

เราใช้อะไรอยู่

• Divi
• GSAP
• ScrollTrigger สำหรับ GSAP
• การสาธิต ScrollTrigger

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

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

พื้นหลังไล่โทนสี

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

• สี 1: #162c2d
• สี 2: #122223
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 20%
• ตำแหน่งสุดท้าย: 20%

ระยะห่าง

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

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

ล้น

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

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

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

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 90%
• ความกว้างสูงสุด: 1580px

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

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

เดสก์ทอป:

display: flex;
justify-content: center;
align-items: center;

แท็บเล็ตและโทรศัพท์:

display: block;

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

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

จากนั้น เราจะเปิดการตั้งค่าคอลัมน์ 1 และแก้ไขความกว้างของคอลัมน์ตามขนาดหน้าจอต่างๆ ในแท็บขั้นสูง

เดสก์ทอป:

width: 45% !important;

แท็บเล็ตและโทรศัพท์:

width: 100% !important;

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

สีพื้นหลัง

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

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

ระยะห่าง

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

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 200px
  • แท็บเล็ต: 100px
  • โทรศัพท์: 50px
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป: 200px
  • แท็บเล็ต: 100px
  • โทรศัพท์: 50px
• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

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

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

เดสก์ทอป:

width: 55% !important;

แท็บเล็ตและโทรศัพท์:

width: 100% !important;

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

ปล่อยให้กล่องรูปภาพว่าง

ได้เวลาเริ่มเพิ่มโมดูล โดยเริ่มจาก Image Module ในคอลัมน์ 1 ปล่อยให้กล่องรูปภาพว่างเปล่า

ภาพพื้นหลัง

เราใช้ภาพพื้นหลังสำหรับโมดูลนี้แทน

ขนาด

เราจะแก้ไขการตั้งค่าการปรับขนาดในแท็บการออกแบบ

• ความกว้าง:
  • เดสก์ท็อป: 100%
  • แท็บเล็ตและโทรศัพท์: 90%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

จากนั้น เราจะนำค่าต่อไปนี้ไปใช้กับการตั้งค่าการเว้นวรรค:

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: 100px
  • แท็บเล็ตและโทรศัพท์: 0px
• ขอบล่าง:
  • เดสก์ท็อป: 100px
  • แท็บเล็ตและโทรศัพท์: 0px
• แผ่นรองด้านบน:
  • เดสก์ท็อป: 250px
  • แท็บเล็ต: 200px
  • โทรศัพท์: 150px
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป: 250px
  • แท็บเล็ต: 200px
  • โทรศัพท์: 150px

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

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

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

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

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

• หัวเรื่อง 3 แบบอักษร: Karla
• หัวเรื่อง 3 สีข้อความ: #e0ca9a
• หัวเรื่อง 3 ขนาดข้อความ:
  • เดสก์ท็อป: 44px
  • แท็บเล็ต: 30px
  • โทรศัพท์: 26px

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

เพิ่มคำอธิบาย เนื้อหา

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

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

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

• แบบอักษรของข้อความ: Alata
• สีข้อความ: rgba(255,255,255,0.67)
• ขนาดข้อความ:
  • เดสก์ท็อป: 17px
  • แท็บเล็ต: 15px
  • โทรศัพท์: 14px
• ความสูงของบรรทัดข้อความ: 2.2em

ระยะห่าง

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

• มาร์จิ้นสูงสุด: 5%

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

เพิ่มสำเนา

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

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

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

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

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

ระยะห่าง

เพิ่มค่าที่กำหนดเองในการตั้งค่าระยะห่างถัดไป

• มาร์จิ้นสูงสุด: 5%
• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px

โคลนแถวสองครั้ง

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

เปลี่ยนรูปภาพและเนื้อหา

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหาที่ซ้ำกันในแต่ละแถวที่ซ้ำกัน

2. เพิ่มเอฟเฟกต์ความเร็วการเลื่อน

เพิ่มคลาส CSS ให้กับองค์ประกอบที่คุณต้องการเอียง

คอลัมน์ 2

ตอนนี้เรามีโครงสร้างองค์ประกอบแล้ว เราสามารถมุ่งเน้นไปที่การทำให้เอฟเฟกต์ทำงาน ในการทำเช่นนั้น ให้เปิดการตั้งค่าคอลัมน์ 2 ของแต่ละแถวและกำหนดคลาส CSS

• CSS Class: velocity-transform

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

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

• CSS Class: velocity-transform

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

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

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

ระยะห่าง

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

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

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

จากนั้น เพิ่มโมดูลโค้ดในแถวใหม่นี้

เพิ่มไลบรารี GSAP & ScrollTrigger

ก่อนเพิ่มโค้ดใดๆ เราจะรวมไลบรารี GSAP และ ScrollTrigger ระหว่างแท็กสคริปต์

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

เพิ่มแท็กสคริปต์

เราจะเพิ่มแท็กสคริปต์ใหม่ด้านล่างไลบรารีเหล่านี้

เพิ่มโค้ดที่กำหนดเองระหว่างแท็กสคริปต์ (แนวตั้งเอียง)

และรวมโค้ด JavaScript บรรทัดต่อไปนี้เพื่อสร้างการเอียงในแนวตั้ง:

let proxy = { skew: 0 },
    skewSetter = gsap.quickSetter(".velocity-transform", "skewY", "deg"), 
    clamp = gsap.utils.clamp(-10, 10);

ScrollTrigger.create({
  onUpdate: (self) => {
    let skew = clamp(self.getVelocity() / -400);
    if (Math.abs(skew) > Math.abs(proxy.skew)) {
      proxy.skew = skew;
      gsap.to(proxy, {skew: 0, duration: 0.8, ease: "power0", overwrite: true, onUpdate: () => skewSetter(proxy.skew)});
    }
  }
});

gsap.set(".velocity-transform", {force3D: true});

ใช้แนวนอนเอียงหรือหมุนแทน

หากคุณต้องการใช้การเอียงในแนวนอนหรือการหมุนแทน ดังที่เห็นในตัวอย่างโพสต์นี้ คุณสามารถแทนที่ “SkewY” ในโค้ดด้วย “SkewX” สำหรับการเอียงในแนวนอนหรือ “rotate” เพื่อการหมุน! แค่นั้นแหละ.

ดูตัวอย่าง

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

แนวตั้งเอียง

เดสก์ทอป

มือถือ

แนวนอนเอียง

เดสก์ทอป

มือถือ

หมุน

เดสก์ทอป

มือถือ

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

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

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