ค้นพบเอฟเฟกต์ภาพเคลื่อนไหวการเลื่อนใหม่บน Divi

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

ขอเริ่มต้น

เอฟเฟกต์การเลื่อนคืออะไร?

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

ฟังดูซับซ้อน แต่ด้วย Divi, มันค่อนข้างง่าย

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

6 เอฟเฟกต์พิเศษหกแบบใหม่

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

การเคลื่อนไหวในแนวตั้ง

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

การเคลื่อนไหวในแนวนอน

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

เบลอตามบริบท

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

ละลาย

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

เอฟเฟกต์การปรับขนาด

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

ผลการหมุน

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

อินเทอร์เฟซที่ใช้งานง่ายใหม่

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

คลิกเพียงครั้งเดียวเท่านั้น!

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

คุณต้องการควบคุมทั้งหมดหรือไม่? คุณมีมัน!

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

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

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

การปรับไทม์ไลน์ของภาพเคลื่อนไหว

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

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

เพิ่มสถานะคงที่ให้กับภาพเคลื่อนไหวใด ๆ

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

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