ตั้งค่าข้อความของคุณให้เคลื่อนไหวด้วยเอฟเฟกต์อันน่าทึ่งเหล่านี้

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

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

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

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

แอนิเมชั่นข้อความ Shattering โดย Arsen Zbidniakov

แค่ดูที่ Shattering Text Animation โดย Arsen Zbidniakov มันไม่เจ๋งเหรอ? โซลูชันนี้ไม่ได้ครอบงำผู้เข้าชมด้วยการดำเนินการมากมายและไดนามิกที่ไม่จำเป็น และไม่โอเวอร์โหลดระบบของคุณ มันใช้ได้ผล ปล่อยให้ทุกคนอยู่ในสถานะ "ว้าว"

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

แอนิเมชั่นข้อความโดย Szenia Zadvornykh

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

Motion Graphic Typeface และการทดลองอื่นโดย Ara

Ara มีการทดลองที่น่าทึ่งหลายครั้งเกี่ยวกับการพิมพ์ ตัวอย่างทั้งสองต่อไปนี้เป็นนามธรรม โดยอิงตามการปรับและสัมผัสทางเรขาคณิต และดูไฮเทค ในบางแง่พวกเขาก็ค่อนข้างแปลกประหลาด

ในตัวอย่างแรก ข้อความประกอบด้วยชิ้นส่วนเล็กๆ ที่ค่อยๆ ก่อตัวเป็นอุโมงค์สามมิติของอนุภาคอย่างช้าๆ แต่แน่นอน

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

แอนิเมชั่นข้อความ GSAP โดย Nate Wiley

Nate Wiley ได้เปลี่ยน Split Text จาก Greensock ให้เป็นประโยชน์ โดยสร้างแอนิเมชั่นข้อความที่ยอดเยี่ยมขึ้นมาใหม่ เขาหยิบข้อความธรรมดาๆ แล้วเป่าเป็นชิ้นเล็กชิ้นน้อย โดยแต่ละอันเป็นสัญลักษณ์ หลังจากการระเบิด ตัวละครจะเคลื่อนที่ไปในทิศทางต่างๆ และหายไปอย่างราบรื่น

CSS Motion Typography: Exploding Text โดย Dudley Storey

ซึ่งแตกต่างจากตัวอย่างก่อนหน้านี้ที่เทคโนโลยีระดับไฮเอนด์อยู่เบื้องหลังความงามของโซลูชัน ที่นี่แสดงการเคลื่อนไหวที่ใช้ CSS Dudley Storey นำเสนอภาพเคลื่อนไหวคีย์เฟรม CSS, การเปลี่ยน, JavaScript, SVG และความมหัศจรรย์เล็กน้อยของ Adobe Illustrator คำจะแตกเล็กน้อยแล้วแบ่งเป็นชิ้นหลายเหลี่ยมในลักษณะที่คุณยังอ่านได้ หากคุณต้องการเพิ่มความมีสไตล์ให้กับการออกแบบตัวอักษรของคุณ เอฟเฟกต์นี้เป็นจุดเริ่มต้นอย่างแน่นอน

ไอคอนมากมายในแบบ 3 มิติโดยใช้ Three.js โดย Yasunobu Ikeda

ในขณะที่ Nate Wiley เป่าข้อความออกไป ในทางกลับกัน Yasunobu Ikeda กลับบังคับให้อนุภาคที่กระจัดกระจายไปทั่วหน้าจอเพื่อสร้างเป็นข้อความ ที่นี่อนุภาคไม่มีอะไรมากไปกว่าไอคอนขนาดเล็ก ผู้เขียนใช้ Three.js เพื่อสร้างแอนิเมชั่น 3 มิติที่งดงามขึ้นมาใหม่

ข้อความเคลื่อนไหว SVG Path โดย Tamino Martinius

Tamino Martinius ได้รับประโยชน์จากการปรับเปลี่ยนแบบเดิมๆ โดยใช้เส้นทาง SVG ด้วยรูปทรงเพรียวบาง เส้นบางเฉียบ และพฤติกรรมเหมือนของเหลว แม้ว่าจะไม่น่าทึ่งเท่าตัวอย่างแรกของเรา แต่พลังของมันอยู่ในความสามารถในการปรับให้เข้ากับโครงการต่างๆ มากมาย เนื่องจากเป็นวิธีแก้ปัญหาที่ใช้งานได้จริงอย่างแน่นอน

สำหรับการใช้งานจริงมากขึ้น

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

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

คิด – สร้างวงจร โดย Mikael Ainalem

ปากกาของ Mikael Ainalem แสดงแอนิเมชั่นแบบวนรอบโดยเน้นคำในการหมุน เป็นวิธีที่ยอดเยี่ยมในการแนะนำผู้ใช้จากคำหนึ่งไปยังอีกคำหนึ่ง

อัดโดย Tryggvi Gylfason

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

Text Scroll เคลื่อนไหวเบลอด้วย TweenMax โดย Ignacio Correia

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

กรณีการใช้แอนิเมชั่นในวิชาการพิมพ์

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

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