การเพิ่มเอฟเฟกต์ 3D ให้กับ GIF และวิดีโอ HTML5 เพื่อแสดงแอนิเมชั่นผลิตภัณฑ์ที่ไม่ซ้ำใน Divi

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

ในบทช่วยสอนนี้ ฉันจะแสดงวิธีเพิ่มเอฟเฟกต์ 3D ให้กับ GIF และวิดีโอ HTML5 เพื่อแสดงแอนิเมชั่นผลิตภัณฑ์ที่ไม่เหมือนใครใน Divi การออกแบบนี้ใช้ได้ผลดีสำหรับผู้ที่มองหาเลย์เอาต์ที่สร้างสรรค์เพื่อแสดงผลิตภัณฑ์หรือบริการเด่น ในการดำเนินการนี้ ก่อนอื่น เราต้องเข้าใจวิธีเพิ่ม GIF และวิดีโอ HTML5 ที่ฝังลงในเพจของคุณโดยใช้ Divi จากนั้นเราจะสามารถใช้ตัวเลือกการแปลงของ Divi เพื่อวางตำแหน่งและหมุน GIF (หรือวิดีโอ) ในพื้นที่ 3 มิติ เพื่อปิดท้าย เราจะใช้เทคนิคการออกแบบ Divi สองสามข้อเพื่อสร้างเลย์เอาต์ส่วนที่สวยงามเพื่อให้เข้ากับ 3D GIF และวิดีโอเหล่านั้น

มาเริ่มกันเลย.

แอบมอง

นี่คือตัวอย่างการออกแบบที่เราจะสร้างในบทช่วยสอนนี้ การออกแบบมีลักษณะคล้ายกันเมื่อใช้ GIF และวิดีโอ HTML5 เพื่อสร้างแอนิเมชั่นของผลิตภัณฑ์

ดาวน์โหลดเอฟเฟกต์ 3D สำหรับวิดีโอ GIF และ HTML5 ภาพเคลื่อนไหวผลิตภัณฑ์ Divi Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปกวดวิชากันเถอะ

สมัครสมาชิกช่อง Youtube ของเรา

การใช้ GIF สำหรับแอนิเมชั่นสินค้าแบบสั้น

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

การใช้วิดีโอ HTML5 เป็นการแทนที่ GIF

วิดีโอ HTML5 กำลังกลายเป็นการแทนที่ GIF ที่ได้รับความนิยม โดยเฉพาะอย่างยิ่งสำหรับแอนิเมชั่นผลิตภัณฑ์ที่ยาวขึ้น คุณอาจสังเกตเห็นว่ามีการใช้สิ่งเหล่านี้ในการออกแบบเว็บไซต์ Elegant Themes ใหม่ มีขนาดเล็กกว่าอย่างเห็นได้ชัดเมื่อเทียบกับ GIF ดังนั้นจึงใช้เวลาโหลดน้อยลง และการเพิ่มวิดีโอ HTML5 ลงในไซต์ Divi ของคุณก็เป็นเรื่องง่าย สิ่งที่คุณต้องทำคือเพิ่มองค์ประกอบวิดีโอ HTML5 เพื่อฝังวิดีโอลงในหน้าเว็บของคุณ (คล้ายกับวิธีเพิ่มรหัสสั้นของวิดีโอใน WordPress) คุณยังสามารถปรับแต่งวิดีโอด้วยการควบคุมที่ซ่อนอยู่ การวนซ้ำ และการเล่นอัตโนมัติ ซึ่งส่งผลให้แอนิเมชั่นคุณภาพสูงที่ทำงานเหมือนกับ GIF นอกจากนี้ เมื่อเพิ่มการฝังลงในโมดูล Divi คุณยังสามารถใช้ตัวสร้าง Divi เพื่อจัดรูปแบบวิดีโอด้วยวิธีที่สร้างสรรค์

ลองอ่านโพสต์นี้เพื่อดูข้อมูลเพิ่มเติมว่าทำไมคุณจึงควรพิจารณาใช้วิดีโอ HTML5 แทน GIF ปกติ

ตอนนี้เราเข้าใจมากขึ้นเกี่ยวกับการใช้ GIF และวิดีโอ HTML5 แล้ว เราก็พร้อมที่จะเริ่มใช้ใน Divi แล้ว

สิ่งที่คุณต้องการสำหรับบทช่วยสอนนี้

ในการเริ่มต้น คุณจะต้องมีสิ่งต่อไปนี้:

1. ภาพ GIF
2. ไฟล์วิดีโอ MP4 (และ URL ไปยังไฟล์วิดีโอนั้น) ที่จะใช้ในการฝังองค์ประกอบวิดีโอ HTML5 เพื่อการสนับสนุนเบราว์เซอร์สูงสุด คุณสามารถรวมวิดีโอเดียวกันในรูปแบบ webm ได้เช่นกัน (เพิ่มเติมในภายหลัง)
3. ธีม Divi ติดตั้งและใช้งานอยู่
4. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การเพิ่มเอฟเฟกต์ 3D ให้กับวิดีโอ GIF แบบเคลื่อนไหวหรือ HTML5

ก่อนที่เราจะออกแบบเลย์เอาต์ส่วนที่สมบูรณ์สำหรับบทช่วยสอนนี้ ฉันคิดว่าควรแสดงวิธีเพิ่มเอฟเฟกต์ 3D ให้กับทั้งวิดีโอ GIF และ HTML5 เมื่อเสร็จแล้ว เราจะขัดเลย์เอาต์ส่วนที่เหลือด้วยการออกแบบที่ทันสมัย

ในตอนนี้ เรามาเริ่มด้วยการเพิ่มเอฟเฟกต์ 3D ให้กับ GIF ใน Divi กันก่อน

การสร้าง GIF

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

หากคุณต้องการเรียนรู้วิธีสร้าง GIF โดยใช้ Snagit ให้ตรวจสอบโพสต์ของเราเกี่ยวกับวิธีเปลี่ยนภาพพื้นหลังด้วย Animated Gif บน Hover

การเพิ่มเอฟเฟกต์ 3D ให้กับ GIF ใน Divi

ตอนนี้ได้เวลาเพิ่ม GIF ลงใน Divi เพื่อให้เราสามารถจัดสไตล์ด้วยเอฟเฟกต์ 3D สุดเจ๋ง

ในการเริ่มต้นใช้งาน ให้เพิ่มส่วนปกติใหม่ที่มีแถวสองคอลัมน์

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

perspective: 1000px;

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

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

อัปโหลด GIF ไปยังโมดูลรูปภาพ สำหรับการออกแบบนี้ GIF ควรมีขนาดประมาณ 600px x 700px

จากนั้นใช้ตัวเลือกการแปลงเพื่อปรับขนาด หมุน และเอียง GIF ในพื้นที่ 3 มิติ

เปลี่ยนแกนหมุน Y: 8deg
เปลี่ยนแกนหมุน X: 28deg

เปลี่ยนแกน Y เอียง: 10deg
เปลี่ยนแกน X เอียง: -8deg

มาตราส่วนการแปลง (แท็บเล็ต): 80%

ทีนี้มาดูผลลัพธ์กัน

การเพิ่มเอฟเฟกต์ 3D ให้กับวิดีโอ HTML5 ใน Divi

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

การสร้างโค้ดฝังวิดีโอ HTML5

องค์ประกอบวิดีโอ HTML5 มีโครงสร้างพื้นฐานดังต่อไปนี้

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

คุณไม่จำเป็นต้องรู้มากเกี่ยวกับ HTML เพื่อดูว่าโค้ดนี้ทำอะไรได้บ้าง ภายในองค์ประกอบ <video> คุณมีองค์ประกอบ <source> สององค์ประกอบที่เก็บพาธ/url ไปยังไฟล์วิดีโอที่คุณต้องการแสดง องค์ประกอบแหล่งที่มาแต่ละรายการมีวิดีโอในรูปแบบไฟล์ที่แตกต่างกัน (webm และ mp4) ทั้งสองจำเป็นสำหรับการสนับสนุนเบราว์เซอร์สูงสุด ลำดับก็มีความสำคัญเช่นกัน วิดีโอ webm ถูกวางไว้เหนือวิดีโอ mp4 ในโค้ดเนื่องจากเป็นรูปแบบวิดีโอคุณภาพสูงกว่า แต่เบราว์เซอร์รองรับน้อยกว่า ดังนั้นหากเบราว์เซอร์รองรับวิดีโอ webm ก็จะแสดงขึ้น แต่ถ้าเบราว์เซอร์ไม่รองรับวิดีโอ webm จะใช้รูปแบบวิดีโอ mp4 ด้านล่าง ไม่จำเป็นต้องรวมทั้งสองรูปแบบวิดีโอ แต่แนวทางปฏิบัติที่ดีที่สุดคือ และถ้าคุณจะใช้เพียงรูปแบบเดียว ให้ใช้รูปแบบ mp4 เพราะมันรองรับในวงกว้างกว่า

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

ในการใช้โค้ดสำหรับวิดีโอของคุณเอง คุณเพียงแค่เพิ่ม URL ของวิดีโอในวงเล็บหลังแอตทริบิวต์ src

หากคุณอัปโหลดไฟล์วิดีโอไปยังไซต์ WordPress คุณสามารถคว้า URL จากไลบรารีสื่อได้

จากนั้นวาง URL ของวิดีโอในวงเล็บหลังแอตทริบิวต์ src

ควรมีลักษณะเช่นนี้เมื่อคุณทำเสร็จแล้ว

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

ต่อไป เราจะเพิ่มแอตทริบิวต์สี่รายการเพื่อควบคุมการแสดงผลและฟังก์ชันการทำงานของวิดีโอ การควบคุมประเภทนี้เป็นสาเหตุหลักในการแทรกวิดีโอ HTML5 ด้วยตนเอง แทนที่จะใช้โมดูลวิดีโอ Divi แอตทริบิวต์เหล่านี้รวมถึงการ autoplay (เพื่อให้วิดีโอเริ่มโดยอัตโนมัติ) loop (เพื่อให้วิดีโอเล่นซ้ำ) muted (เพื่อไม่ให้วิดีโอเล่นเสียง) และเล่นแบบ playsinline (เพื่อให้วิดีโอเล่นภายในพื้นที่เล่นขององค์ประกอบ) หากต้องการใช้แอตทริบิวต์เหล่านี้กับวิดีโอ ให้เพิ่มแอตทริบิวต์แต่ละรายการในวงเล็บของแท็ก <video> เริ่มต้น

ตอนนี้รหัสจะมีลักษณะเช่นนี้

<video autoplay loop muted playsinline>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

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

ตอนนี้คุณพร้อมที่จะฝังโค้ดแล้ว

การฝังวิดีโอ HTML5

ในการฝังวิดีโอ HTML5 ในหน้าของคุณ เราสามารถใช้โมดูลโค้ดได้

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

จากนั้นวางโค้ดสำหรับฝังวิดีโอ HTML5 ลงในช่องป้อนโค้ด

จากนั้นคัดลอกรูปแบบการแปลงจากโมดูลรูปภาพและวางรูปแบบการแปลงลงในโมดูลโค้ด หรือคุณสามารถอัปเดตสไตล์การแปลงได้ดังนี้:

เปลี่ยนแกนหมุน Y: 8deg
เปลี่ยนแกนหมุน X: 28deg
เปลี่ยนแกน Y เอียง: 10deg
เปลี่ยนแกน X เอียง: -8deg
มาตราส่วนการแปลง (แท็บเล็ต): 80%

เนื่องจากฉันใช้วิดีโอเดียวกันกับที่ใช้สร้าง GIF การออกแบบจึงดูคล้ายกันมาก อย่างไรก็ตาม ขนาดของวิดีโอนั้นเล็กกว่าขนาดของ GIF อย่างมาก นี่คือผลลัพธ์

เสร็จสิ้นการออกแบบเค้าโครงส่วน

ตอนนี้เรามี 3D GIF (หรือวิดีโอ HTML5) แล้ว เราสามารถออกแบบเค้าโครงส่วนของเราให้เสร็จสิ้นได้ สำหรับการออกแบบนี้ ฉันจะใช้ส่วนที่มีวิดีโอ HTML5 ในคอลัมน์ 1

การปรับแต่งส่วนและแถว

เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้

บุนวม: บน 15%, ล่าง 15%

จากนั้นเปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

ไล่สีพื้นหลังด้านซ้าย: #ba7fe8
ไล่สีพื้นหลังด้านขวา: #4b84ff

ความสูงสูงสุด: 300px (เดสก์ท็อป), ไม่มี (แท็บเล็ตและโทรศัพท์)

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

ต่อไป เราสามารถกำหนดเงากล่องด้านในกึ่งโปร่งใสให้กับแถวสำหรับองค์ประกอบการออกแบบที่ไม่เหมือนใคร

กล่องเงา: ดูภาพหน้าจอ
กล่องเงาตำแหน่งแนวนอน: 0px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของการกระจายเงาของกล่อง: 40px
เงาสี: rgba(255,255,255,0.89)

การวางตำแหน่งโมดูลโค้ด

ตอนนี้ เรามาเพิ่มโค้ดโมดูลด้วยวิดีโอกันสักหน่อย โดยการปรับคุณสมบัติการแปลงการแปลงดังนี้:

แปลงแกน Y แปล: -20% (เดสก์ท็อป), -7% (โทรศัพท์)

การเพิ่มโมดูลการเรียกร้องให้ดำเนินการ

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

เพิ่ม URL ลิงก์ของปุ่ม เพื่อให้ปุ่มปรากฏขึ้น

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

สีพื้นหลัง: #ffffff
การจัดตำแหน่งข้อความ: ซ้าย
สีข้อความ: Dark

แบบอักษรของชื่อเรื่อง: Lato
น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
ชื่อข้อความสี: #20292f
แบบอักษรของร่างกาย: Lato
สีข้อความ: #6d7c90
ขนาดข้อความเนื้อหา: 17px
ความสูงของเส้นร่างกาย: 1.8em

ขนาดข้อความของปุ่ม: 12px
สีข้อความของปุ่ม: #ffffff
สีพื้นหลังของปุ่ม: #4b84ff
ความกว้างของขอบปุ่ม: 0px
รัศมีเส้นขอบของปุ่ม: 100px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
แบบอักษรของปุ่ม: Lato
น้ำหนักแบบอักษรของปุ่ม: หนัก
รูปแบบตัวอักษรของปุ่ม: TT
ปุ่ม Padding: บน 12px, ด้านล่าง 12px, ซ้าย 20px, 20px ขวา

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของการกระจายเงาของกล่อง: 40px
เงาสี: rgba(103,151,255,0.11)

มาร์จิ้น: 10% ถูกต้อง

แปลงแกน Y แปล: -33% (เดสก์ท็อป), -15% (โทรศัพท์)
แปลงแกน X แปล: -5%

ผลสุดท้าย

เดสก์ทอป

ยาเม็ด

โทรศัพท์

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

การเพิ่มเอฟเฟกต์ 3D ให้กับ GIF และวิดีโอ HTML5 ทำให้การแสดงผลแอนิเมชั่นของผลิตภัณฑ์นั้นมีเอกลักษณ์เฉพาะตัว ตัวเลือกการแปลงของ Divi (รวมกับคุณสมบัติเปอร์สเปคทีฟ) ทำให้ง่ายต่อการเพิ่มเอฟเฟกต์ 3D ให้กับ GIF และวิดีโอของคุณ

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!