สร้างเอฟเฟกต์ข้อความที่สั่นคลอนด้วย JavaScript

Sep 14, 2025
วิธีการ
A screenshot from Patrick Heng's website including moving typography

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

ดังนั้นฉลาดฉลาด แต่ให้แน่ใจว่าของคุณ พิมพ์จิตจี เอฟเฟกต์ใช้งานได้จริงเหมือนที่เคยทำ เว็บไซต์ของ Patrick Heng - ให้ความสำคัญในภาพด้านบน อ่านต่อเพื่อค้นหาว่า ...

1. สร้างข้อความแนะนำ

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

 & lt; สคริปต์ & gt;
var offset1 = 0;
var offset2 = 0;
var offset3 = 0;
& lt; / script & gt;

2. แยกข้อความ

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

 $ ("H1") ระเบิด ({
  ตัวคั่น: "ตัวละคร"
});
ฟังก์ชั่น amon () {
  Var $ Spans = $ ("# top") ค้นหา ('ช่วง');
  $ spans.each (ฟังก์ชั่น () {
  Offset1 + = 40;

3. เพิ่มความเร็ว

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

 $ (นี้). ความสามารถ ({
  Transly: -100,
  ความทึบ: 1
  }, {
  ล่าช้า: offset1,
  ระยะเวลา: 800,
  การผ่อนคลาย: "ง่าย"
  });
  });
}

4. เรียกการกระทำ

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

 Anim ();
Settimeout (ฟังก์ชั่น () {
  var $ spans = $ ("# กลาง") ค้นหา ('ช่วง');
  $ spans.each (ฟังก์ชั่น () {
  Offset2 + = 40;
  $ (นี้). ประสิทธิภาพ ({
  Transly: -100,
  ความทึบแสง: 0.8
  }, {

5. เดินหน้าต่อไป

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

 ล่าช้า: offset2,
  ระยะเวลา: 800,
  การผ่อนคลาย: "ง่าย"
  });
  });
}, 100);
Settimeout (ฟังก์ชั่น () {
  Var $ Spans = $ ("# ด้านล่าง") ค้นหา ('ช่วง');

6. เพิ่มตัวอักษรสุดท้าย

ตอนนี้ตัวอักษรสุดท้ายถูกย้ายเข้าที่ สิ่งนี้ให้ผลเช่นเดียวกับ เว็บไซต์ของ Patrick Heng ซึ่งมีชั้นของการย้ายข้อความ Patrick ใช้ WebGL เพื่อย้ายข้อความ แต่นี่เป็นวิธีที่ง่ายกว่าด้วยองค์ประกอบ DOM 

 $ spans.each (ฟังก์ชั่น () {
  offset3 + = 40;
  $ (นี้). ประสิทธิภาพ ({
  Transly: -100,
  ความทึบแสง: 0.8
  }, {
  ล่าช้า: offset3,
  ระยะเวลา: 800,
  การผ่อนคลาย: "ง่าย"
  });
  });
}, 150);

เรียนรู้เพิ่มเติมที่สร้างลอนดอน

Generate graphic

ดู Richard Rutter, Sarah Parmenter และ Bruce Lawson และคุยกันมากขึ้นที่ Generate London 2018

Richard Rutter มีความรักและความหลงใหลในการพิมพ์และร่วมก่อตั้ง fontdeck บริการแบบอักษรเว็บบุกเบิก ในฐานะผู้เผยแพร่ภาพพิมพ์เว็บที่ได้รับการแต่งตั้งด้วยตนเอง Richard เป็นหัวหน้าออแกไนเซอร์ของ Clearleft ampersand การประชุมวิชาการพิมพ์เว็บ

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

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

อย่าพลาดจองตั๋วของคุณตอนนี้

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

  • JavaScript ที่สมบูรณ์แบบในโครงการ 1,000 โครงการ
  • เคล็ดลับประเภทดิจิตอลสำหรับนักออกแบบกราฟิก
  • 7 แหล่งข้อมูลประเภทเว็บที่ยอดเยี่ยม

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

บทช่วยสอน Reels Instagram: คู่มือเริ่มต้น

วิธีการ Sep 14, 2025

(เครดิตรูปภาพ: Facebook) บทช่วยสอน Reels Instagram นี้จะช่ว..

วิธีการวาดสุนัข

วิธีการ Sep 14, 2025

บทช่วยสอนวันนี้จะแสดงวิธีการวาดสุนัข โครงกร�..

10 วิธีในการปรับปรุงกายวิภาค 3 มิติของคุณ

วิธีการ Sep 14, 2025

(เครดิตภาพ: Ryan Kingslien) การสร้างร่างมนุษย์เป็นห�..

สร้าง UI ควบคุมด้วยเสียง

วิธีการ Sep 14, 2025

เราได้เห็น API ใหม่จำนวนมากที่เพิ่มเข้ามาในเว็บในช่วงไม่กี่ปีที่ผ่า..

วิธีการสร้างการตกแต่งภายในด้วย Eevee ของ Blender

วิธีการ Sep 14, 2025

Atypique-studio: มีพื้นผิวจาก poliigon.com - พื้นผิวอาจไม่สามารถแจ�..

วิธีการสร้างเว็บไซต์บล็อกด้วย Gatsby

วิธีการ Sep 14, 2025

เฟรมเวิร์กเช่นทำปฏิกิริยาเพียงส่ง JavaScript ลงไปที..

วิธีการทาสีเพชรประดับที่น่ารื่นรมย์

วิธีการ Sep 14, 2025

ต้นกำเนิดของการวาดภาพขนาดเล็กทอดยาวไปถึงยุค..

วิธีการปั้นที่โน้มน้าวใจใน zbrush

วิธีการ Sep 14, 2025

เมื่อแกะสลักตามนุษย์ 3 มิติที่สมจริงเพื่อเพิ่..

หมวดหมู่