สร้างเอฟเฟกต์ข้อความไอน้ำเคลื่อนไหว

Sep 12, 2025
วิธีการ
Steam text effect

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

รับ ไฟล์โครงการ เพื่อช่วยติดตามการกวดวิชานี้

01. เริ่มต้นเอกสาร HTML

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

 ​​& lt;! Doctype HTML & GT;
& lt; html & gt;
& lt; หัว & gt;
& lt; ชื่อ & gt; ข้อความเบลอ & lt; / ชื่อ & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; สคริปต์ SRC = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; ร่างกาย & gt;
  *** ขั้นตอนที่ 2 ที่นี่
& lt; / body & gt;
& lt; / html & gt;

02. เนื้อหา HTML

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

 ​​& lt; h2 & gt;
  วินัยมาจาก
  & lt; ul class = "Blur" & GT;
  & lt; li & gt; ความมุ่งมั่น & lt; / li & gt;
  & lt; li & gt; ความเพียร & lt; / li & gt;
  & lt; li & gt; ทุ่มเท & lt; / li & gt;
  & lt; li & gt; การฝึกอบรม & lt; / li & gt;
  & lt; li & gt; ความทะเยอทะยาน & lt; / li & gt;
  & lt; li & gt; การศึกษา & lt; / li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. ความล่าช้าในการเคลื่อนไหวอัตโนมัติ

สร้างไฟล์ใหม่ที่เรียกว่า 'code.js' แต่ละรายการภายในคอนเทนเนอร์เบลอจะต้องนำเสนอสามวินาทีหลังจากรายการก่อนหน้า JavaScript ใช้ในการใช้แอปพลิเคชันของแอตทริบิวต์ CSS ที่เป็นเอกลักษณ์โดยอัตโนมัติ ขั้นตอนแรกของนี้คือการเลือกรายการระดับแรกทั้งหมดภายในคอนเทนเนอร์เบลอ - หลังจากโหลดหน้าโหลดแล้ว 

 window.addeventlistener ("โหลด", ฟังก์ชั่น () {
  var nodes = document.queryselectorall (". Blur & GT; *");
  *** ขั้นตอนที่ 4 ที่นี่
});

04. จำนวนวินาที

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

 สำหรับ (var i = 0; i & lt; nodes.length; i ++) {
  โหนด [i] .style.anyle.anyationsdelay = (i * 3) + "s";
}

05. CSS เบลอ

สร้างไฟล์ใหม่ที่เรียกว่า 'styles.css' ขั้นตอนแรกในการกำหนดกฎการนำเสนอ CSS จะเริ่มต้นแต่ละรายการข้อความที่มองไม่เห็น แอนิเมชั่นที่เรียกว่า 'แอนิเมชั่นเบลาร์' ยังมีการใช้ไอเท็มในมุมมองในระยะเวลาห้าวินาที โหมดภาพเคลื่อนไหวจะต้องตั้งค่าเป็น 'ส่งต่อ' เพื่อให้มันหยุดในเฟรมสุดท้าย 

 .blur & gt; * {
  ความทึบ: 0;
  แอนิเมชัน: AnimateBlur 5s Forwards;
}

06. เริ่มต้นนิเมชั่น

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

 @Keyframes AnimateBlur {
  จาก {
  ความทึบแสง: 1;
  Text-Shadow: 0 0 1em RGBA (0,0,0, .5);
  สี: RGBA (0,0,0,0);
  }
    *** ขั้นตอนที่ 7 ที่นี่
}

07. กรอบอนิเมชั่นสุดท้าย

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

 ถึง {
  ความทึบแสง: 1;
  Text-Shadow: 0 0 0px RGBA (0,0,0,0);
  สี: # 000;
}

บทความนี้ปรากฏในนิตยสารออกแบบเว็บ สมัครสมาชิกที่นี่ .

จำไว้ว่า - คิดถึงผู้ใช้เสมอ

Generate - the conference for web designers

เมื่อแนะนำเอฟเฟกต์แฟนซีให้กับหน้าเว็บจะต้องมีจุดประสงค์คุณต้องคิดถึงประสบการณ์ผู้ใช้และนี่คือสิ่งที่นักพัฒนา UI Front-end ของ Freelance Sara Soueidan จะเปิดเผยในเธอ 'ใช้ CSS (และ SVG) เพื่อการพูดคุยที่ดีของ UX ที่ สร้างลอนดอน 2018 .

ในการพูดคุยของเธอเธอกำลังจะแสดงความเป็นไปได้ที่หลากหลายที่ CSS เสนอเพื่อปรับปรุงประสบการณ์การใช้งานโดยรวมของ UI ของคุณโดยใช้ CSS (พร้อม SPINGLES SVG และ JS ที่นี่และที่นั่น)

ตรวจสอบให้แน่ใจว่าคุณไม่พลาด รับตั๋วของคุณตอนนี้

บทความที่เกี่ยวข้อง:

  • สร้างเอฟเฟกต์ข้อความที่สั่นคลอนด้วย JavaScript
  • สร้างเอฟเฟกต์ข้อความนีออนที่เร่าร้อน
  • วิธีการสร้างข้อความอย่างสมบูรณ์แบบ

วิธีการ - บทความยอดนิยม

นักออกแบบ Affinity: วิธีการใช้ Pixel Persona

วิธีการ Sep 12, 2025

Designer Affinity เป็นเครื่องมือแก้ไขเวกเตอร์ยอดนิยมสำห..

วิธีการลบพื้นหลังใน Photoshop

วิธีการ Sep 12, 2025

หน้า 1 จาก 4: เครื่องมือ Magic Wand เครื่องมือ Magic Wand ..

วิธีการทำพระคัมภีร์ตัวละครของคุณเอง

วิธีการ Sep 12, 2025

สำหรับทุกคนที่ทำงานอย่างมืออาชีพใน การออก..

สร้างแอพที่ทำงานแบบออฟไลน์

วิธีการ Sep 12, 2025

เป็นเวลานานฟังก์ชั่นออฟไลน์การซิงโครไนซ์พื้..

อัพเกรดพื้นผิวของคุณในนักออกแบบสาร

วิธีการ Sep 12, 2025

Daniel Therger เป็นผู้นำด้านสิ่งแวดล้อมของ Bungie Daniel Therge ให้�..

มีอะไรใหม่ในเชิงมุม 4?

วิธีการ Sep 12, 2025

หน้า 1 จาก 2: ขั้นตอนที่ 1-10 ขั้..

ทาสีแนวสัตว์เลี้ยงขนยาว

วิธีการ Sep 12, 2025

ภาพแมวสำเร็จรูปของเรา สัตว์เลี้ยงจิตร�..

10 Top Houdini Tutorials

วิธีการ Sep 12, 2025

Houdini เป็นสัตว์ร้ายที่ทรงพลังพร้อมเครื่องมือสำหรับการสร้าง VFX ที่ใช้ใ�..

หมวดหมู่