กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้แบบเคลื่อนไหวด้วย GSAP

สมมติว่าคุณต้องการบทช่วยสอนเกี่ยวกับวิธีทำให้กราฟิกแบบเวกเตอร์ปรับขนาดได้ (SVG) เคลื่อนไหว:
SVG เป็นมาตรฐานที่ใช้โดยนักพัฒนาและนักออกแบบเพื่อสร้างกราฟิกแบบเวกเตอร์สองมิติ แม้ว่ารูปแบบจะสามารถสร้างกราฟิกที่สมบูรณ์ได้ แต่ไฟล์ก็มักจะมีขนาดเล็กกว่ารูปแบบภาพอื่นๆ ทั่วไป ทำให้เหมาะสำหรับการใช้งานบนเว็บ
เมื่อพูดถึงแอนิเมชัน SVG มีหลายวิธีในการดำเนินการ GSAP ของ GreenSock อาจเป็นตัวเลือกยอดนิยมที่สุด แต่ไม่ใช่ตัวเลือกเดียว ในบทช่วยสอนนี้ เราจะดูวิธีทำให้ SVG เคลื่อนไหวโดยใช้เครื่องมือของ GSAP รวมถึงวิธีเรียกใช้ภาพเคลื่อนไหวโดยใช้ JavaScript

สิ่งนี้ทำได้โดยอินไลน์ (โค้ด SVG ใน HTML) และแอนิเมชั่นที่ใช้ CSS ของส่วนต่างๆ โรงเรียนเก่าของฉัน Wufoo ต้องการรีเฟรชกราฟิกโฆษณาที่เราใช้ที่นี่ ดูเหมือนว่าเป็นช่วงเวลาที่ดีที่จะใช้มันมากยิ่งขึ้น วิธีการดำเนินการแสดงในวิดีโอด้านล่าง CSS จะได้รับประโยชน์จากการสุ่มแบบเนทีฟของคุณสมบัติการหน่วงเวลาของภาพเคลื่อนไหว คงจะดีถ้าเห็นตัวอักษรถูกปรับเพียงเล็กน้อยในแต่ละช่วง คงจะดีไม่น้อยหากอนิเมชั่นนี้จบลงภายใน 3 วินาที

เอฟเฟ็กต์ translateY(150px) ทำให้ไดโนเสาร์เคลื่อนที่ต่ำกว่าจนไม่มีอะไรปรากฏ ไดโนเสาร์ถูกซ่อนอยู่ในตอนแรกในโฆษณานี้ แต่เมื่อ แอนิเมชั่นค่อยๆ เข้า/ออก คำว่า Fast จะปรากฏขึ้น ด้วยการใช้เทคนิค ol' padded box เราสามารถสร้างสเกล SVG แบบอินไลน์ที่รักษาอัตราส่วนไว้ในขณะที่ใช้ SVG แบบอินไลน์ เนื่องจากนี่คือโฆษณา คุณสามารถใช้ <a href=> ได้ เพียงตรวจสอบให้แน่ใจว่าได้ตั้งค่าคุณสมบัติ block เป็น display: block แทนการใช้ a <div>

การสร้างวัตถุเคลื่อนไหว ผู้ส่งออกสามารถใช้เพื่อสร้าง ภาพเคลื่อนไหว SVG เมื่อตั้งค่าโหมด Render เป็น Animation เฟรมทั้งหมดของเรนเดอร์ ไม่ว่าจะเป็นเฟรม (F12 หรือ Shift-F12) หรือเฟรมทั้งหมดในการเรนเดอร์ (Shift-F12 หรือ F12) จะถูกบันทึกไว้ในไฟล์เดียว

สามารถใช้ องค์ประกอบภาพเคลื่อนไหว เพื่อสร้างกราฟิก SVG องค์ประกอบแอนิเมชันแรกของ SMIL ได้รับการระบุดังนี้: *animate%27/animate%27 – ซึ่งช่วยให้คุณสร้างแอนิเมชันและคุณสมบัติสเกลาร์ได้เมื่อเวลาผ่านไป

ในกรณีส่วนใหญ่ การใช้แท็ก *img เป็นสาเหตุหลักของ ภาพเคลื่อนไหว SVG ที่ล้มเหลว เมื่อภาพเคลื่อนไหวเริ่มต้นขึ้น SVG อาจปรากฏบนเว็บไซต์ แต่จะไม่เริ่มทำงาน วิธีที่ง่ายที่สุดในการแก้ปัญหานี้คือการแทนที่แท็ก img> ทั้งหมดด้วยแท็ก object>

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

ฉันจะสร้าง Svg แบบเคลื่อนไหวได้อย่างไร

มีสองสามวิธีในการสร้าง SVG แบบเคลื่อนไหว วิธีหนึ่งคือการใช้โปรแกรมวาดภาพเวกเตอร์ เช่น Adobe Illustrator เพื่อสร้างอาร์ตเวิร์ก จากนั้นใช้เครื่องมือ เช่น After Effects เพื่อเพิ่มภาพเคลื่อนไหว อีกวิธีหนึ่งคือการใช้เครื่องมือเช่น Snap.svg เพื่อสร้างภาพเคลื่อนไหวโดยตรงในโค้ด

บทช่วยสอนนี้จะแนะนำคุณเกี่ยวกับขั้นตอนพื้นฐานของการเพิ่มประสิทธิภาพและการสร้างภาพเคลื่อนไหวด้วย CSS ในบริบทของ sva เวอร์ชัน Bootstrap เดียวที่ใช้ได้สำหรับจุดประสงค์นี้คือ Bootstrap 4.1.3 หากคุณบูตสแตรป ตรวจสอบให้แน่ใจว่า SVG ของคุณมีคลาส img-fluid เพื่อให้แน่ใจว่าปรับขนาดได้อย่างเหมาะสมบนมือถือ สามารถปรับแต่งรูปภาพได้โดยเพิ่มคลาสให้กับ SVG เมื่อเราขอให้ CSS ทำเอฟเฟกต์กับภาพเคลื่อนไหว เราต้องระบุชื่อและคีย์เฟรม เมื่อสี่เหลี่ยมผืนผ้าเสร็จสิ้นการเฟด ภาพเคลื่อนไหวข้อความ จะต้องทำงานพร้อมกัน เนื่องจากการเปลี่ยนแปลงนี้ ลูกบาศก์เบซิเยร์ในขั้นตอนนี้จึงอยู่ในสถานะเคลื่อนที่เร็วขึ้น ภาพเคลื่อนไหวนี้ปรากฏที่ 40% ของเวลาตรงกลางของเรา เรารีเซ็ตชุดระยะประจังหวะเพื่อให้เส้นประครอบคลุมเส้นทางทั้งหมด

วิธีทำให้ Svg เคลื่อนไหว

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

เคลื่อนไหว Svg Css

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

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) ซึ่งเป็นรูปแบบภาพเวกเตอร์ที่ใช้ XML ช่วยให้สามารถโต้ตอบได้เช่นเดียวกับภาพเคลื่อนไหวในกราฟิกสองมิติ บทความนี้จะกล่าวถึงวิธีส่งออกและเพิ่มประสิทธิภาพไฟล์ sva ฝัง และอธิบายว่าแต่ละไฟล์มีผลกระทบอย่างไรต่อสไตล์และแอนิเมชันที่คุณสร้าง CSS จะถูกใช้เพื่อจัดรูปแบบและทำให้เคลื่อนไหว หากคุณทำงานกับไฟล์ที่มีพาธจำนวนมาก การเปลี่ยนจำนวนตำแหน่งทศนิยมจากสี่เป็นหนึ่งตำแหน่งจะสามารถลดขนาดไฟล์ลงได้ 50% คุณสามารถดูตัวอย่างการเพิ่มประสิทธิภาพได้หากพบว่าไฟล์ของคุณเสียหาย ดังนั้นจึงเป็นข้อดีอย่างมาก เครื่องมือออนไลน์ของ Peter Collingridge สำหรับการเพิ่มประสิทธิภาพ sva เป็นหนึ่งในเครื่องมือที่มีอยู่มากมาย เนื่องจาก SVG 1.1 ไม่ต้องการ CSS แอตทริบิวต์สไตล์ CSS ที่ใช้กับโหนด SVG จึงเรียกว่าแอตทริบิวต์การนำเสนอ

การตั้งค่าแอตทริบิวต์การนำเสนอคล้ายกับการตั้งค่าคุณสมบัติ CSS ในองค์ประกอบ แม้ว่าพวกมันจะมีบทบาทสำคัญในน้ำตกสไตล์ แต่เราจะอธิบายเรื่องนี้ในเชิงลึกได้ในเร็วๆ นี้ นอกจากนี้ยังสามารถใช้คุณสมบัติ CSS เพื่อกำหนดสไตล์ของ องค์ประกอบ SVG การใช้แอตทริบิวต์การนำเสนอบนโหนด sva เหมือนกับการใช้แอตทริบิวต์เพื่อกำหนดคุณสมบัติ CSS แอตทริบิวต์การนำเสนอทั้งหมดเป็นสไตล์ชีตสิทธิ์ระดับต่ำ ดังนั้นจึงสามารถระบุได้โดยการกำหนดสไตล์อื่นๆ ควรใช้สไตล์ด้านล่างในไดอะแกรม เช่น ด้านบน เหนือสไตล์ที่อยู่ด้านบน คลาสหลอกแบบไดนามิกของ CSS2 เช่น:hover,:active และ:focus ใช้เพื่อจัดรูปแบบ SVG ส่วนใหญ่

ความสามารถของ องค์ประกอบ SVG ในการแปลงและแปลงแหล่งกำเนิดด้วยวิธีเดียวกับที่องค์ประกอบ HTML ทำนั้นคล้ายคลึงกับความสามารถขององค์ประกอบ HTML ในการแปลงและแปลงกำเนิดในลักษณะเดียวกับที่องค์ประกอบ CSS ทำ เนื่องจาก SVG ไม่ได้อยู่ภายใต้โมเดลกล่อง จึงไม่มีเส้นขอบ ช่องว่างภายใน หรือระยะขอบ เหมือนกับองค์ประกอบ HTML ตามที่ระบุไว้ในข้อกำหนดเฉพาะพยางค์ ชื่อคุณสมบัติที่เหมาะสม (โดยปกติจะเป็นอักษรตัวพิมพ์เล็กและขีดกลาง) ถูกกำหนดโดยข้อกำหนดเฉพาะของ CSS เมื่อมีการระบุค่าต้นกำเนิดของการแปลงเป็นเปอร์เซ็นต์ ค่านั้นจะถูกตั้งค่าให้สัมพันธ์กับกล่องขอบเขตขององค์ประกอบ ณ ตอนนี้ Firefox ไม่รองรับการตั้งค่าจุดเริ่มต้นเป็นค่าเปอร์เซ็นต์สำหรับการแปลง หากคุณต้องการให้การแปลงทำงานอย่างถูกต้องในระยะยาว คุณควรใช้ค่าสัมบูรณ์ มีหกวิธีในการแทรก SVG ในเอกสาร แต่ละวิธีมีข้อดีและข้อเสียต่างกันไป

คุณสามารถกำหนดได้ว่าสไตล์ ภาพเคลื่อนไหว และการโต้ตอบของ CSS บางอย่างจะทำงานได้หรือไม่หลังจากที่คุณฝัง SVG โดยใช้วิธีการฝัง ข้อมูลเพิ่มเติมเกี่ยวกับเทคนิคนี้สามารถพบได้ในบทความที่ยอดเยี่ยมของ Jake Archibald ยังคงได้รับการสนับสนุนอย่างกว้างขวางแม้ว่ามาตรฐาน HTML จะไม่เคยระบุวิธีการจัดรูปแบบก็ตาม แท็ก >svg> ยังสามารถใช้เพื่อรวม SVG เข้ากับเอกสารแบบอินไลน์ ซึ่งเรียกว่าโค้ดไอส์แลนด์ เนื่องจาก SVG สามารถจัดรูปแบบและเคลื่อนไหวได้โดยใช้ SVG และ CSS แบบอินไลน์ จึงใช้งานได้ง่ายกว่า หากคุณกำลังจะฝัง SVG ตรวจสอบให้แน่ใจว่าสามารถฝังได้ในทุกเบราว์เซอร์ ขึ้นอยู่กับเทคนิคการฝัง คุณอาจต้องเพิ่มการแฮ็กหรือการแก้ไขเพื่อให้ SVG ข้ามเบราว์เซอร์เข้ากันได้

หากต้องการดูรายละเอียด โปรดอ่านบทความของฉันเกี่ยวกับ Codrops เป็นไปไม่ได้ที่จะเพิ่มแฮ็คใหม่ ๆ เมื่อรูปภาพถูกฝังใน SVG เป็นพื้นหลัง คุณต้องแน่ใจว่าความกว้างขององค์ประกอบของคุณคือ 100% ใน CSS ขนาด 300 x 150 พิกเซลเป็นขนาดเริ่มต้นสำหรับองค์ประกอบที่ถูกแทนที่ เฉพาะการแฮ็ก Adobe Photoshop ที่บุกเบิกโดย Thierry Koblentz ใน A List Apart เท่านั้นที่สามารถสร้าง iframe ที่ตอบสนองได้ นอกจากนี้ยังสามารถส่งแบบสอบถามสื่อ CSS ไปยัง SVG ด้วยคำสั่งสื่อ คุณสามารถเปลี่ยนสไตล์ของ SVG ในทุกขนาดวิวพอร์ต เมื่อ SVG ตอบสนองต่อวิวพอร์ตของเพจ แสดงว่าไม่ใช่วิวพอร์ตของเพจ แต่เป็นวิวพอร์ตของมันเอง นี่เป็นแนวคิดเดียวกันกับการค้นหาองค์ประกอบในทางปฏิบัติ

ภาพเคลื่อนไหว Svg ด้วย Css

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

วิธีทำให้เส้นทาง Svg เคลื่อนไหว

มีหลายวิธีในการทำให้เส้นทาง SVG เคลื่อนไหว: 1. การใช้แอตทริบิวต์การแปลง SVG 2. การใช้ ภาพเคลื่อนไหว CSS3 3. การใช้ SMIL 4. การใช้ JavaScript แอตทริบิวต์การแปลงเป็นวิธีที่พบได้บ่อยที่สุดในการทำให้เส้นทาง SVG เคลื่อนไหว การดำเนินการนี้จะทำให้เส้นทางเคลื่อนไหวโดยเปลี่ยนพิกัดของเส้นทาง ในการทำให้เส้นทางเคลื่อนไหวโดยใช้ CSS3 คุณจะต้องตั้งค่าคุณสมบัติฟังก์ชั่นการกำหนดเวลาภาพเคลื่อนไหวให้เป็นแบบเส้นตรงหรือแบบอื่น จากนั้น คุณสามารถตั้งค่าคุณสมบัติระยะเวลาของภาพเคลื่อนไหวเป็นระยะเวลาที่คุณต้องการให้ภาพเคลื่อนไหวทำงาน SMIL เป็นอีกวิธีหนึ่งในการทำให้เส้นทางเคลื่อนไหว SMIL ย่อมาจาก Synchronized Multimedia Integration Language สิ่งนี้จะช่วยให้คุณสร้างเส้นทางโดยใช้องค์ประกอบ วิธีสุดท้ายในการทำให้เส้นทางเคลื่อนไหวคือการใช้ JavaScript ในการทำเช่นนี้ คุณจะต้องสร้างฟังก์ชันที่จะอัปเดตพิกัดของเส้นทาง จากนั้น คุณสามารถเรียกใช้ฟังก์ชันนี้เพื่อเรียกใช้แอนิเมชัน

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

ทำไมคุณควรทำให้ Svgs เคลื่อนไหวบนเว็บไซต์ของคุณ

JavaScript สามารถเข้าถึงได้ผ่านเมนู JavaScript ภายนอก คุณต้องตั้งค่าความยาวของเส้นประ (และช่องว่าง) ให้เท่ากับความยาวของเส้นทางเพื่อทำให้เส้นทางนี้เคลื่อนไหวราวกับว่ามันกำลังวาดอย่างช้าๆ และราบรื่นบนหน้าจอ ความยาวของเส้นประและช่องว่างในเส้นทางโค้งแต่ละเส้นจะเท่ากับความยาวของเส้นทางทั้งหมด คุณเคลื่อนไหว sva ได้อย่างไร? การใช้ CSS และ SVG เพื่อทำให้เว็บไซต์เคลื่อนไหวส่งผลให้เวลาในการโหลดเร็วขึ้นเมื่อเทียบกับ gif และวิดีโอขนาดใหญ่ ความสามารถในการทำให้เว็บไซต์ของคุณเคลื่อนไหวโดยไม่ต้องติดตั้งไลบรารี JavaScript อื่นยังช่วยให้คุณสร้างภาพเคลื่อนไหวอย่างง่ายในการโหลดหน้าเว็บ คุณคิดว่า SMIL จะถูกเพิกถอนหรือไม่? ในความเป็นจริงแล้ว มันไม่ใช่สิ่งทดแทนสำหรับ แอนิเมชั่น SMIL แม้ว่าข้อมูลจำเพาะจะขึ้นอยู่กับ SMIL แต่ก็มีการพัฒนาอย่างมากในช่วงหลายปีที่ผ่านมา เบราว์เซอร์รองรับได้หลายวิธี

ตัวอย่างภาพเคลื่อนไหว Svg

มีภาพเคลื่อนไหวหลายประเภทที่สามารถใช้กับ SVG ได้ เหล่านี้รวมถึง:
ภาพเคลื่อนไหว -SMIL: เป็นภาพเคลื่อนไหวที่เขียนด้วยภาษา SMIL (Synchronized Multimedia Integration Language) SMIL เป็นภาษาที่ใช้ XML ซึ่งใช้เพื่ออธิบายเวลาและภาพเคลื่อนไหว
ภาพเคลื่อนไหว -CSS: เป็นภาพเคลื่อนไหวที่เขียนด้วย CSS CSS เป็นภาษาสไตล์ชีตที่ใช้เพื่ออธิบายการนำเสนอเอกสารที่เขียนด้วยภาษามาร์กอัป
-ภาพเคลื่อนไหวจาวาสคริปต์: เป็นภาพเคลื่อนไหวที่เขียนด้วยจาวาสคริปต์ JavaScript เป็นภาษาโปรแกรมที่ใช้สร้างเว็บเพจแบบโต้ตอบ

SVG (กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้) เป็นองค์ประกอบภาพที่สามารถปรับขนาดเป็นขนาดใดก็ได้ แก้ไขและปรับใช้ในภายหลังได้ง่ายกว่าเพราะใช้โค้ดแทนพิกเซล อะไรคือส่วนที่ดีที่สุดของ svg? ภาพเคลื่อนไหวมีขนาดเล็กมากและโหลดเร็วมาก เหมาะสำหรับแอปพลิเคชันการออกแบบเว็บสมัยใหม่ที่หลากหลาย สามารถใช้ Animator เพื่อทำให้รูปภาพเคลื่อนไหวได้หากเชื่อมต่อกับรูปภาพนั้นและตั้งค่าแอนิเมชันไว้ ใช้ เครื่องมือภาพเคลื่อนไหว SVG ของ Framer หากคุณต้องการทำให้ SVG เคลื่อนไหวด้วย CSS, JavaScript หรือ HTML

Svg เคลื่อนไหว Css ได้ไหม

มี เครื่องมือแอนิเมชัน อื่น ๆ ให้ใช้งาน แต่เครื่องมือสร้างแอนิเมชันไม่ง่ายเหมือน CSS

เหตุใด Svg จึงเป็นรูปแบบภาพที่เหนือกว่าสำหรับการออกแบบเว็บไซต์

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