螺旋文字滾動特效源碼解析详情 - 前端,css,動畫南城FE 日志

如圖所示，今天看到一個很炫酷的雙文字螺旋滾動特效，兩行文字呈螺旋狀變化，在網站中這樣的效果對用户很有吸引力。本文將基於原網站解析如何實現這個炫酷的效果，基於這個動圖可以分析出需要實現的要點：

文字呈螺旋狀滾動
滾動過程中文字大小變化
動畫過程無縫鏈接
兩行文字滾動

實現過程

文字展示

為了方便更改文案將文案定義變量，通過JS代碼動態創建DOM，定義文案、螺旋的角度以及動畫的持續時間：

const words = "螺旋文字滾動特效";
const ANGLE = 360;
const ANIMATION_DURATION = 4000;

將文案創建元素添加到頁面中：

const characters = words.split("").forEach((char, i) => {
  const createElement = (offset) => {
    const div = document.createElement("div");
    div.innerText = char;
    div.classList.add("character");
    div.setAttribute("data-offset", offset);
    return div;
  };

  document.querySelector("#spiral").append(createElement(0));
  document
    .querySelector("#spiral2")
    .append(createElement(-1 * (ANIMATION_DURATION / 2)));
});

因為有2行文字滾動，所以這裏添加了2個spiral。

<div id="spiral" class="spiral"></div>
<div id="spiral2" class="spiral"></div>

給 spiral 設置flex佈局，此時的頁面效果如下：

.spiral{
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  color: #e0ecef;
  font-family: "sans-serif";
}

讓文字動起來

這裏的動畫基於CSS Houdini @property實現，首先定義一個自定義屬性--angle，接受角度值，初始值為0度。

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

設置關鍵幀動畫，修改定義的--angle屬性從0度旋轉到360度。

@keyframes spiral {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}

給每個文字的增加animation動畫關聯定義的關鍵幀動畫spiral。

.character{
  transform: translateY(calc(sin(var(--angle)) * 100px)) scale(calc(cos(var(--angle)) * 0.5 + 0.5));
  animation: spiral 4s linear infinite;
}

重點代碼transform變換，使用transform屬性結合calc函數和三角函數來實現Y軸的正弦波形偏移和縮放效果。

同時在動畫中應用了前面定義的spiral動畫。結合這兩個函數，transform 屬性效果如下：

Y 軸位移: 元素根據 --angle 的值在 Y 軸上上下移動，形成波動效果。
縮放效果: 元素的大小根據 --angle 的值進行動態縮放，形成從小到大或從大到小的變化。

此時的動畫效果：

螺旋滾動

此時我們的文字已經滾動起來了，只需要最後一步關鍵的代碼就可以實現螺旋滾動效果，仔細看原始效果就能發現其實每個文字滾動的動畫軌跡都是一樣的，唯一的區別就是執行的動畫延遲時間不同，形成了一個波動起伏的效果。

增加延遲動畫CSS，由於我們的文字是通過JS創建的，所以需要在 createElement 中增加以下代碼即可，根據動畫持續時間和當前文字索引計算延遲時間：

div.style.animationDelay = `-${i * (ANIMATION_DURATION / 16) - offset}ms`

由於 --angle 設置了關鍵幀動畫，是一個動態變化的變量，這段代碼會使得元素在頁面上呈現出螺旋或波動的動畫效果，增強視覺吸引力。

此時我們的動畫效果基本就完成了，如下所示：

兼容火狐

由於Firefox不支持@property動畫，原作者寫了火狐兼容代碼，使用JavaScript來實現動畫效果。

定義一個animation動畫函數，使用 requestAnimationFrame 方法實現平滑的動畫效果。

const animation = () => {
  ANGLE -= 1; 
  //...
  requestAnimationFrame(animation);
};

在動畫函數中遍歷所有文字元素來設置動畫。

document.querySelectorAll(".spiral *").forEach((el, i) => {
  // ...
});

計算Y軸偏移和縮放，使用三角函數計算每個元素的Y軸偏移量和縮放比例:

const translateY = Math.sin(ANGLE * (Math.PI / 120)) * 100;
const scale = Math.cos(ANGLE * (Math.PI / 120)) * 0.5 + 0.5;

設置動畫延遲，根據元素索引和數據屬性data-offset計算動畫的延遲時間。

const offset = parseInt(el.dataset.offset);
const delay = i * (ANIMATION_DURATION / 16) - offset;

最後動態設置CSS變換屬性transform來應用Y軸偏移和縮放。在定時器中使用delay延遲時間執行動畫。

setTimeout(() => {
  el.style.transform = `translateY(${translateY}px) scale(${scale})`;
}, delay);

火狐瀏覽器執行動畫函數。

let isFirefox = typeof InstallTrigger !== 'undefined';

if(isFirefox){
  animation();
}

在線預覽

關注公眾號回覆【 20240730 】可獲取完整源代碼~

最後

通過結合 JavaScript 和 CSS，我們成功實現了一個動態的螺旋文字滾動特效。該特效不僅展示了字符的動態變化，還通過延遲時間結合動畫效果增強了視覺吸引力。本質實現這個效果是不需要 JavaScript，為了兼容火狐和動態創建文案DOM才使用了相關 JavaScript。有興趣的可以嘗試使用純CSS實現這個炫酷的螺旋文字滾動特效。

看完本文如果覺得有用，記得點個贊支持，收藏起來説不定哪天就用上啦～