วิธีเลื่อนแนวนอนโดยอัตโนมัติเมื่อเลื่อนในแนวตั้งด้วย Divi & GSAP

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

ภาพรวมของแนวทาง

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

• Divi
• ไลบรารี JavaScript GSAP
• ปลั๊กอิน ScrollTrigger สำหรับ GSAP
• ScrollTrigger สาธิต

เรากำลังสร้างอะไร

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

1. เพิ่มส่วนตัวยึดตำแหน่ง

เพิ่มมาตรา #1

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

ขนาด

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

• ส่วนสูง: 60vh

โคลนมาตรา #1

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

1. สร้างส่วนการออกแบบ

เพิ่มส่วนใหม่ระหว่างส่วนต่างๆ

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

ขนาด

เปิดการตั้งค่าส่วนและกำหนดความสูงสูงสุดในการตั้งค่าการปรับขนาด

• ความสูงสูงสุด: 100vh

ล้น

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

• ล้นแนวตั้ง: อัตโนมัติ

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

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

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

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center

ขนาด

แก้ไขการตั้งค่าขนาดของแถวถัดไป

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง:
  • เดสก์ท็อป: 70%
  • แท็บเล็ตและโทรศัพท์: 80%

ระยะห่าง

พร้อมกับการตั้งค่าระยะห่าง

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 30vh
  • แท็บเล็ตและโทรศัพท์: 20vh
• ช่องว่างภายในด้านล่าง: 0px

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

จากนั้นเปิดการตั้งค่าคอลัมน์

สีพื้นหลัง

ใช้สีพื้นหลังสีขาวสำหรับคอลัมน์

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

ระยะห่าง

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

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

ชายแดน

ใช้เส้นขอบด้วย

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

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

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

ถึงเวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรกที่มีเนื้อหา H4 บางส่วน

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

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

• แบบอักษรของหัวเรื่อง 4: Source Code Pro
• หัวเรื่อง 4 สีข้อความ: #000000
• หัวเรื่อง 4 ขนาดข้อความ:
  • เดสก์ท็อป: 1.2vw
  • แท็บเล็ต: 2.5vw
  • โทรศัพท์: 3.5vw
• หัวเรื่อง 4 ระยะห่างตัวอักษร: 1px

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

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

เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้าและใช้เนื้อหา H3 บางส่วนในกล่องเนื้อหา

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

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

• หัวข้อ 3 แบบอักษร: Alata
• หัวเรื่อง 3 ขนาดข้อความ:
  • เดสก์ท็อป: 2.5vw
  • แท็บเล็ต: 4vw
  • โทรศัพท์: 7vw

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

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

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

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

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

• แบบอักษรข้อความ: Source Code Pro
• ขนาดข้อความ:
  • เดสก์ท็อป: 0.8vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• ความสูงของบรรทัดข้อความ: 1.5em

ขนาด

เปลี่ยนการตั้งค่าขนาดต่อไป

• ความกว้าง:
  • เดสก์ท็อป: 67%
  • แท็บเล็ตและโทรศัพท์: 100%

ระยะห่าง

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

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 3vh
  • แท็บเล็ตและโทรศัพท์: 5vh
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป: 3vh
  • แท็บเล็ตและโทรศัพท์: 5vh

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

เพิ่มสำเนา

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

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 0.8vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: Source Code Pro
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 15px
• ช่องว่างภายใน: 15px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ตำแหน่ง

และเปลี่ยนตำแหน่งโมดูลในแท็บขั้นสูง

• ตำแหน่ง: Absolute
• ตำแหน่ง: มุมล่างซ้าย
• ออฟเซ็ตแนวตั้ง: -5%
• ออฟเซ็ตแนวนอน: 5%

2. มาตราการนำกลับมาใช้ใหม่

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

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

เปลี่ยนรูปภาพ & คัดลอก & ลิงก์

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

2. เพิ่มฟังก์ชันการทำงาน

เพิ่มคลาส CSS ให้กับแต่ละส่วนที่คุณต้องการรวมในแนวนอน Scroll

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

• คลาส CSS: ส่วนแนวนอน

เพิ่มโมดูลโค้ดใหม่ที่ไหนสักแห่งภายในหน้า

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

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

คัดลอกและวางไลบรารี GSAP และ ScrollTrigger ภายใน Code Module ใช้แท็กสคริปต์สำหรับสิ่งนี้กับแหล่งที่มาต่อไปนี้:

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

เพิ่มแท็กสคริปต์ใหม่สำหรับรหัสที่กำหนดเอง

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

เพิ่มรหัส JS

เตรียมความพร้อมสำหรับการใช้งาน JQuery

ภายในแท็กสคริปต์เหล่านี้ เราจะเริ่มต้นด้วยการโหลด JQuery

jQuery(document).ready(function($){  
});

ลงทะเบียนปลั๊กอิน ScrollTrigger

จากนั้น เราจะลงทะเบียนปลั๊กอิน ScrollTrigger

gsap.registerPlugin(ScrollTrigger);

รวมส่วนที่เกี่ยวข้องทั้งหมดใน Div . ใหม่

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

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');  

สร้าง GSAP Tween ใหม่ด้วย ScrollTrigger

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

gsap.to(allSections, {
  xPercent: -100 * (allSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: false,
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  }
});

เพิ่มแท็กสไตล์สำหรับโค้ด CSS ที่กำหนดเอง

ต่อไป เราจะเพิ่มแท็กรูปแบบลงในโมดูลโค้ดของเรา

แทรกโค้ด CSS ระหว่างแท็กสไตล์

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

.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
width: 100%;
will-change: transform;
}

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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