วิธีเพิ่มแอนิเมชั่นในส่วน/แถว

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

ดูตัวอย่าง

เดสก์ทอป

มือถือ

โหลด Divi Builder ลงในเพจหรือโพสต์

สิ่งแรกที่คุณต้องทำคือเข้าสู่ Divi Builder ไม่ว่าคุณจะเลือกชุดเลย์เอาต์ชุดใดชุดหนึ่งของเรา (เราจะใช้ชุดเลย์เอาต์ของไม้เทนนิสสำหรับบทความนี้) หรือการออกแบบของคุณเอง ขั้นตอนทั้งหมดจะเกิดขึ้นภายในการตั้งค่า Section และ Row

ด้วยการออกแบบนี้ เราจะสร้างภาพเคลื่อนไหว 1 ส่วนและ 3 แถวเพื่อให้ได้เอฟเฟกต์การโหลดตามลำดับ

เลือกเลย์เอาต์ที่สร้างไว้ล่วงหน้า

หากต้องการใช้ชุดเลย์เอาต์ที่ออกแบบอย่างมืออาชีพ ให้เข้าสู่ Divi Builder แล้วเลือก Use a Premade Layout นี่จะแสดงรายการของแจกฟรีทั้งหมดที่เรานำเสนอ

เลือกเค้าโครง

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

ค้นหาส่วนและแถวที่จะเคลื่อนไหว

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

ด้วยแผนที่ออกมา มาเพิ่มแอนิเมชั่นเหล่านั้นกันเถอะ!

วิธีเพิ่มแอนิเมชั่นในส่วนและแถว – ตัวเลือก 1

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

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

1. สไตล์แอนิเมชั่น เป็นที่ที่คุณเลือกว่าจะให้แอนิเมชั่นปรากฏอย่างไร ถ้าส่วนจะม้วนปลายสุดหรือเด้งจากด้านข้างของหน้าเหมือนลูกบอล ที่พบบ่อยที่สุดคือ Fade และ Slide
2. ทิศทาง – คุณจะกำหนดทิศทางที่องค์ประกอบจะเคลื่อนที่ไป ค่า ขึ้น หมายถึงส่วนจะเริ่มต้นที่ด้านล่างและเลื่อนขึ้น ขึ้น ไม่ใช่จุดเริ่มต้น
3. Duration – ระยะเวลา ที่อนิเมชั่นจะคงอยู่ตั้งแต่ต้นจนจบ ค่าที่ต่ำกว่าจะทำให้เร็วขึ้น และค่าที่สูงกว่าจะทำให้ช้าลง
4. หน่วงเวลา – ตัวเลือกนี้ป้องกันไม่ให้แอนิเมชั่นทริกเกอร์โดยเร็วที่สุด และสามารถช่วยเรียกร้องความสนใจมากกว่าที่จะทริกเกอร์ทันที
5. ความเข้ม – ยิ่งค่าต่ำเท่าไร ภาพเคลื่อนไหวก็จะยิ่งราบรื่นมากขึ้นเท่านั้น ในขณะที่ค่าที่สูงกว่าจะรวดเร็วกว่าและรุนแรงกว่า
6. ค่าความทึบเริ่มต้น – ค่า 0 จะทำให้แอนิเมชั่นเริ่มล่องหนและเข้าสู่โฟกัสตลอดระยะเวลา 100 หมายความว่าองค์ประกอบสามารถมองเห็นได้อย่างสมบูรณ์แม้กระทั่งก่อนที่ภาพเคลื่อนไหวจะเริ่มขึ้น
7. เส้นโค้งความเร็ว – สิ่งนี้จะช่วยให้คุณสามารถปรับความราบรื่นในการเริ่มต้นและสิ้นสุดของแอนิเมชั่น
8. ทำซ้ำ – แอนิเมชั่นของคุณเป็นเอฟเฟกต์แบบครั้งเดียวหรือเป็นสิ่งที่คุณต้องการวนซ้ำแล้วซ้ำอีกหรือไม่? หากตั้งค่าแอนิเมชั่นเป็น Once หน้าจะต้องโหลดซ้ำเพื่อเริ่มต้นอีกครั้ง

วิธีเพิ่มแอนิเมชั่นในส่วนและแถว – ตัวเลือก2

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

วิธีเปิดใช้งานเอฟเฟกต์การเลื่อน

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

เลือกเอฟเฟกต์และทริกเกอร์

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

• ตำแหน่งที่ติดหนึบ – ส่วนหรือแถวจะเกาะติดกับหน้าจอของผู้ใช้หรือไม่ขณะที่เลื่อนผ่าน
• เอฟเฟกต์การแปลงร่าง – นี่คือเอฟเฟกต์แอนิเมชั่นที่แท้จริง: การเคลื่อนไหวในแนวนอนและแนวตั้ง เฟดเข้า/ออก การปรับขนาด การหมุน และการเบลอ
• ตั้งค่า [คุณสมบัติ] – คุณจะสามารถตั้งค่าว่าจะให้เอฟเฟกต์ปรากฏที่ใดบนหน้าจอมากที่สุด และเมื่อใด/ที่ที่มันเกิดขึ้น
• Motion Effect Trigger – คุณจะกำหนดว่าแอนิเมชั่นเริ่มต้นเมื่อด้านบนขององค์ประกอบเข้าสู่วิวพอร์ต ศูนย์กลางขององค์ประกอบ หรือด้านล่าง

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

การรวมแอนิเมชั่นสำหรับส่วนและแถว

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

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

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

การตั้งค่าแอนิเมชั่นสำหรับแถวที่ 1

ต่อไปเราจะปรับแถวแรกในส่วน เราไปที่การตั้งค่า แถว ไปที่ตัวเลือก แอนิเมชั่น ภายใต้แท็บ ออกแบบ แล้วเลือก สไลด์ อีกครั้ง ครั้งนี้ เราต้องการเปลี่ยน Direction เป็น Down และ Animation Delay เป็น 5 00ms 1000ms เท่ากับ 1 วินาที จำไว้

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

การตั้งค่าแอนิเมชั่นสำหรับแถวที่ 2

ต่อไป เราจะไปที่การตั้งค่าสำหรับ แถว ที่สองของหน้าและไปที่ตัวเลือก ภาพเคลื่อนไหว อีกครั้ง เราจะเลือก Slide สำหรับ Animation Style และแถวนี้จะเลื่อนไปทาง ขวา

นอกจากนี้ เราจะตั้งค่าการ หน่วงเวลาของแอนิเมชัน ที่ 1,000 มิลลิวินาที ซึ่งหมายความว่าค่านี้จะทริกเกอร์ทันทีที่แอนิเมชั่นแรกจบลง

การตั้งค่าแอนิเมชั่นสำหรับแถว 3

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

ตัวเลือกแอนิเมชั่น

ก่อนอื่น เราจะทำซ้ำขั้นตอนข้างต้น เฉพาะแถวนี้เท่านั้น เรากำลังตั้งค่า รูปแบบแอนิเมชั่น เป็นจาง จากนั้น เราจะตั้งค่า Duration เป็น 500ms เพื่อให้แถวนี้ปรากฏเร็วขึ้นระหว่างแอนิเมชัน เราจะ หน่วงเวลา ไว้ 1500 มิลลิวินาที เพื่อให้แน่ใจว่าอนิเมชั่นอื่นๆ จะเสร็จสมบูรณ์ก่อนที่จะเริ่ม

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

การตั้งค่าเอฟเฟกต์เลื่อน

นี่คือสิ่งที่สนุกเพราะเราได้รวมเอฟเฟกต์ คลิกที่แท็บ Advanced สำหรับ Row และค้นหา Scroll Effects ค้นหาแท็บ Horizontal Motion และอย่าลืมเปิดใช้งาน จากนั้นตั้งค่า Motion Effect Trigger เป็น Middle of Element เราใช้ตรงกลางแทนด้านบนเพื่อให้แน่ใจว่าเอฟเฟกต์จะไม่เริ่มมีผลจนกว่าผู้ใช้จะเลื่อน เผื่อในกรณีที่วิวพอร์ตของผู้ใช้แสดงที่ด้านบนสุดของแถว

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

ผลลัพธ์สุดท้าย

เมื่อคุณทำเสร็จแล้ว ผลลัพธ์ของคุณควรเป็นแบบนี้

เดสก์ทอป

มือถือ

บทสรุป

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

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

บทความภาพโดย Vectorchok / shutterstock.com