วิธีรีสตาร์ทแอนิเมชั่นทุกครั้งที่คุณเลื่อนผ่านองค์ประกอบด้วย Divi & GSAP

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

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

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

ขนาด

แก้ไขความสูงของส่วนดังนี้:

• ส่วนสูง: 100vh

ส่วนตัวยึดตำแหน่งโคลน

จากนั้นโคลนส่วนหนึ่งครั้ง

เพิ่มส่วนใหม่ระหว่างส่วนตัวยึดตำแหน่ง

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

เพิ่มแถว #1

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2
• ความกว้าง: 90%
• ความกว้างสูงสุด: 2080px

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

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

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

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: หนัก
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #f9f9f9
• ขนาดข้อความ:
  • เดสก์ท็อป: 150px
  • แท็บเล็ตและโทรศัพท์: 11vw
• ความสูงของบรรทัดข้อความ: 1.1em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

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

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

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

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

จัดรูปแบบข้อความ H2 ดังนี้:

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 ขนาดข้อความ:
  • เดสก์ท็อป: 80px
  • แท็บเล็ตและโทรศัพท์: 10vw

ขนาด

เพิ่มความกว้าง 100% ด้วย

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

ตำแหน่ง

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

• ตำแหน่ง: Absolute
• ที่ตั้ง: Center

เพิ่มแถว #2

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2
• ความกว้าง: 90%
• ความกว้างสูงสุด: 2080px

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

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

ภาพพื้นหลัง

อัปโหลดภาพพื้นหลังที่คุณเลือก

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

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างของคอลัมน์ถัดไป

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

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

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

จากนั้น เพิ่มโมดูลข้อความลงในคอลัมน์ 1 ที่มีเนื้อหา H4

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

จัดรูปแบบข้อความ H4 ตามลำดับ:

• หัวข้อที่ 4 แบบอักษร: Lato
• หัวข้อ 4 น้ำหนักแบบอักษร: หนัก
• รูปแบบตัวอักษรของหัวเรื่อง 4: ตัวพิมพ์ใหญ่
• หัวเรื่อง 4 ขนาดข้อความ: 13px
• หัวเรื่อง 4 ระยะห่างตัวอักษร: 2px

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

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

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

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

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

• หัวข้อ 3 แบบอักษร: มอนต์เซอร์รัต
• หัวเรื่อง 3 ขนาดข้อความ: 36px
• หัวเรื่อง 3 ระยะห่างตัวอักษร: 1px
• ส่วนหัว 3 ความสูงของบรรทัด: 1.2em

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

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

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

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

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

• แบบอักษรของข้อความ: Lato
• สีข้อความ: #4c4c4c
• ระยะห่างของตัวอักษรข้อความ: 0.5px
• ความสูงของบรรทัดข้อความ: 2em

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

เพิ่มสำเนา

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

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

จัดรูปแบบปุ่มในแท็บการออกแบบ

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 14px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 0px

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

ใช้คอลัมน์ 1

ลบคอลัมน์ 2 & 3

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

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

และนำคอลัมน์ 1 กลับมาใช้ใหม่โดยการโคลนสองครั้ง

เปลี่ยนรูปภาพพื้นหลังของคอลัมน์ที่ซ้ำกัน

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

เปลี่ยนเนื้อหาในคอลัมน์ที่ซ้ำกัน

พร้อมกับเนื้อหาโมดูล

เพิ่มการแปลงการตั้งค่าการแปลเป็นคอลัมน์ 2

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

• ซ้าย:
  • เดสก์ท็อป: 50px
  • แท็บเล็ตและโทรศัพท์: 0px

2. ใช้เทคนิคการรีสตาร์ทแอนิเมชั่นเพื่อการออกแบบ

เพิ่มคลาส CSS ให้กับแถว #2

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

• คลาส CSS: trigger-animation-row

เพิ่มโค้ดโมดูลในแถว #1

คลาส CSS ที่เราได้เพิ่มไว้ในขั้นตอนก่อนหน้าของบทช่วยสอนนี้ จะช่วยให้เรากำหนดเป้าหมายโมดูลทั้งหมดในแถวนี้พร้อมกัน ในการสร้างแอนิเมชั่นการรีสตาร์ท เราใช้โค้ด JQuery, ไลบรารี JavaScript GSAP และไลบรารี ScrollTrigger สำหรับ GSAP ในการเพิ่มโค้ดนี้ เราจะแทรกโค้ดโมดูลใหม่ด้านล่างโมดูลข้อความที่สองในแถว #1

เพิ่มไลบรารี 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

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

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

เพิ่มฟังก์ชัน GSAP + ScrollTrigger

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

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

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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