feat: refactor logo scramble animation to support multi-line text elements with responsive layout adjustments

Author: tvvocold

index.html

@@ -32,7 +32,7 @@
         <!-- 英雄区域 -->
         <section class="hero">
             <div class="hero-content">
-                <h1 class="logo-text">字节交汇，皆有引力</h1>
+                <h1 class="logo-text"><span class="logo-line">字节交汇</span><span class="logo-line">皆有引力</span></h1>
                 <p class="logo-english">ByteGravity</p>
                 <p class="tagline">
                     我们运营 toB 与 toC 两大差异化广告网络<br>让品牌与媒体的每一个字节都拥有强大的传播引力

main.js

@@ -26,42 +26,91 @@ function scrambleLogoText() {
   const el = document.querySelector(".logo-text");
   if (!el) return;
 
-  const target = el.textContent;
-  // 字符池全部使用全角字符（与汉字同宽 1em），避免闪变时标题总宽度抖动
+  const lines = el.querySelectorAll(".logo-line");
   const chars =
     "字节引力天津科技有限公司＊广告联盟网络０１＜＞＃＊＋＝／＼｜ＡＢＣＤＥＦＧＨＫＭＮＲＳＴＷＸＹＺ";
   const frameInterval = 40; // 每帧毫秒数
   const lockStagger = 233; // 相邻字符锁定时刻间隔（毫秒），总时长约 1.6s
-  const frames = [];
 
-  for (let i = 0; i < target.length; i++) {
-    // 标点不闪变，直接保持
-    const lockAt = target[i].match(/[，。、！？,.!?]/) ? 0 : i * lockStagger;
-    frames.push({ char: target[i], lockAt });
-  }
+  if (lines.length > 0) {
+    // 存在 .logo-line 分行元素时，针对每个 span 分别计算并更新，保留 HTML 结构
+    const lineData = [];
+    let globalIndex = 0;
+
+    lines.forEach((lineEl) => {
+      const target = lineEl.textContent;
+      const frames = [];
+      for (let i = 0; i < target.length; i++) {
+        const lockAt = target[i].match(/[，。、！？,.!?]/) ? 0 : globalIndex * lockStagger;
+        frames.push({ char: target[i], lockAt });
+        globalIndex++;
+      }
+      lineData.push({ el: lineEl, target, frames });
+    });
 
-  const start = performance.now();
-  const timer = setInterval(() => {
-    const elapsed = performance.now() - start;
-    let done = true;
-    let output = "";
+    const start = performance.now();
+    const timer = setInterval(() => {
+      const elapsed = performance.now() - start;
+      let allDone = true;
+
+      for (const line of lineData) {
+        let lineDone = true;
+        let output = "";
+
+        for (const f of line.frames) {
+          if (elapsed >= f.lockAt) {
+            output += f.char;
+          } else {
+            lineDone = false;
+            output += chars[Math.floor(Math.random() * chars.length)];
+          }
+        }
 
-    for (const f of frames) {
-      if (elapsed >= f.lockAt) {
-        output += f.char;
-      } else {
-        done = false;
-        output += chars[Math.floor(Math.random() * chars.length)];
+        line.el.textContent = output;
+        if (!lineDone) {
+          allDone = false;
+        }
+      }
+
+      if (allDone) {
+        clearInterval(timer);
+        lineData.forEach((line) => {
+          line.el.textContent = line.target;
+        });
       }
+    }, frameInterval);
+  } else {
+    // 降级处理：无 .logo-line 结构时直接处理整个 el
+    const target = el.textContent;
+    const frames = [];
+    for (let i = 0; i < target.length; i++) {
+      const lockAt = target[i].match(/[，。、！？,.!?]/) ? 0 : i * lockStagger;
+      frames.push({ char: target[i], lockAt });
     }
 
-    el.textContent = output;
+    const start = performance.now();
+    const timer = setInterval(() => {
+      const elapsed = performance.now() - start;
+      let done = true;
+      let output = "";
+
+      for (const f of frames) {
+        if (elapsed >= f.lockAt) {
+          output += f.char;
+        } else {
+          done = false;
+          output += chars[Math.floor(Math.random() * chars.length)];
+        }
+      }
 
-    if (done) {
-      clearInterval(timer);
-      el.textContent = target;
-    }
-  }, frameInterval);
+      el.textContent = output;
+
+      if (done) {
+        clearInterval(timer);
+        el.textContent = target;
+      }
+    }, frameInterval);
+  }
 }
 
 // 滚动动画 - IntersectionObserver

styles.css

@@ -304,6 +304,10 @@ body {
   animation: glow 2s ease-in-out infinite alternate;
 }
 
+.logo-text .logo-line:first-child {
+  margin-right: 0.4em;
+}
+
 @keyframes glow {
   from {
     filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.3));
@@ -788,6 +792,14 @@ footer {
     letter-spacing: 0.05em;
   }
 
+  .logo-text .logo-line {
+    display: block;
+  }
+
+  .logo-text .logo-line:first-child {
+    margin-right: 0;
+  }
+
   .logo-english {
     letter-spacing: 0.15em;
     font-size: 1rem;