10 CSS ข้อความเคลื่อนไหวที่น่าทึ่ง & ตัวอย่างโค้ด JavaScript

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

และในโพสต์นี้ ฉันได้รวบรวมตัวอย่างที่เจ๋งที่สุด 10 ตัวอย่างจากทั่วทั้งเว็บ เพื่อแสดงสิ่งที่คุณสามารถทำได้ด้วยข้อความที่มีสไตล์และโค้ด CSS เพียงเล็กน้อย

คุณอาจชอบ CSS Animation Tools เหล่านี้

1. ชื่อเรื่องแอนิเมชั่น

เอฟเฟกต์ชื่อเรื่องแบบเคลื่อนไหวโดย Robin Treur ตามสไตล์ของภาพยนตร์หรือวิดีโอเกมมากมาย ตัวอักษรใช้เอฟเฟกต์ 3D ที่ยื่นออกมาโดยใช้เงาข้อความ CSS3 พร้อมกับเอียงแนวทแยงเล็กน้อย

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

2. ป่นปี้

การสร้างข้อความที่แตกเป็นเสี่ยงเป็นงานง่าย ๆ ด้วยเครื่องมืออย่าง After Effects แต่การสร้างแอนิเมชั่นการสลายข้อความด้วยโค้ดนั้นยากกว่ามาก ทำให้ปากกานี้โดย Arsen Zbidniakov ค่อนข้างน่าประทับใจ

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

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

3. จดหมายบิดเบี้ยว

นักพัฒนา Mamun Khandaker ได้รวบรวมแอนิเมชั่นตัวอักษรบิดเบี้ยวนี้ไว้ด้วยกัน สไตล์แอนิเมชั่นแต่ละสไตล์มีชื่อต่างกัน และคุณสามารถเรียกดูได้ทั้งหมดด้วยปากกาเดียวนี้

ฉันเห็นผลข้อความเหล่านี้ที่ใช้บนหน้า Landing Page หรือหน้าแรกของเครื่องมือ/เว็บแอป สิ่งเหล่านี้ดึงดูดความสนใจได้ทันที และสร้างความประทับใจไม่รู้ลืมแก่ผู้มาเยือน นอกจากนี้ยังสร้างด้วย CSS บริสุทธิ์ 100% และปรับแต่งได้ง่ายสุด ๆ

4. ตัวอักษรพิกเซล

เอฟเฟกต์พิกเซลแบบเคลื่อนไหวที่ไม่เหมือนใครนี้ดูแปลกแต่ก็ชวนให้หลงใหลอย่างประหลาด มันอาศัย JavaScript เป็นส่วนใหญ่และถูกสร้างขึ้นโดยนักพัฒนา Georgi Nikoloff เพื่อเป็นวิธีเล่นกับองค์ประกอบผ้าใบ HTML5

ใช้ Noto Serif เป็นฐานแบบอักษรและแปลงตัวอักษรเป็นองค์ประกอบที่ปรับเปลี่ยนได้ภายในองค์ประกอบผ้าใบ JavaScript แบ่งตัวอักษรเป็นจุดเล็กๆ และสิ่งเหล่านี้เป็นพื้นฐานของแอนิเมชั่น

ฉันไม่สามารถพูดได้ว่าสิ่งนี้จะมีประโยชน์อย่างมาก แต่เป็นข้อพิสูจน์ว่าแอนิเมชั่นเว็บมาไกลแค่ไหน

5. พิมพ์ม้าหมุน

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

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

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

6. ไทเกอร์ ไทเกอร์

คำยืมจากบทกวีของวิลเลียม เบลกเรื่อง “The Tyger” แอนิเมชั่นที่มีเอกลักษณ์เฉพาะตัวของโจเซฟ มาร์ชชิช ดึงความสนใจของคุณได้จริงๆ

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

7. Snap SVG

ไลบรารี Snap.svg แบบโอเพนซอร์สช่วยให้ทุกคนสร้างภาพ SVG ที่มีความละเอียดสูงได้โดยใช้โค้ดเพียงเล็กน้อย สิ่งนี้ง่ายกว่าการเรียนรู้โปรแกรมอย่าง Illustrator และช่วยให้คุณสร้างแอนิเมชั่นได้เหมือนกับตัวอย่างสนุกๆ ที่สร้างโดย Alexis Blondin

ตัวอักษรทั้งหมดถูกสร้างขึ้นแบบไดนามิกผ่าน JavaScript รวมถึงอักขระสุ่มที่ใช้ในแอนิเมชั่น การรองรับ SVG สมัยใหม่นั้นมีขนาดใหญ่มาก และประเภทรูปภาพเหล่านี้สามารถเปลี่ยนแปลงวิธีที่เราสร้างเว็บไซต์ได้อย่างมากในอีกไม่กี่ปีข้างหน้า แอนิเมชั่น Snap.svg นี้เป็นเพียงตัวอย่างหนึ่ง และแน่นอนว่าเป็นแอนิเมชั่นที่ยอดเยี่ยม

8. แอนิเมชั่นวงเล็บ

นี่เป็นอีกหนึ่งเทคนิคการทำแอนิเมชั่นข้อความทั่วไปที่ฉันเห็นตลอดเวลา มันใช้วงเล็บปีกกากับข้อความที่หมุนได้เกือบจะเหมือนกับ rolodex บนหน้า

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

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

9. Kimmie Schmidt ที่ไม่แตกหัก

เอฟเฟกต์โลโก้แสนหวานนี้ยืมมาจากซีรีส์ Netflix “Unbreakable Kimmie Schmidt” ทุกอย่างถูกสร้างขึ้นด้วย CSS รวมถึงสไตล์ข้อความและแอนิเมชั่นที่กำหนดเอง

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

เป็นอีกตัวอย่างหนึ่งที่แสดงให้เห็นว่า CSS3 ทำอะไรได้บ้างหากคุณรู้วิธีใช้งาน

10. การกรอกข้อความ SVG

สุดท้ายนี้ เรามาที่แอนิเมชั่นฟิลเลอร์ SVG ที่ไม่เหมือนใครโดยใช้การผสมระหว่างเงาของกล่องและคุณสมบัติ CSS สโตรก

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

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