圖片

如圖所示，今天看到一個(gè)很炫酷的雙文字螺旋滾動(dòng)特效，兩行文字呈螺旋狀變化，在網(wǎng)站中這樣的效果對(duì)用戶很有吸引力。本文將基于原網(wǎng)站解析如何實(shí)現(xiàn)這個(gè)炫酷的效果，基于這個(gè)動(dòng)圖可以分析出需要實(shí)現(xiàn)的要點(diǎn)：

• 文字呈螺旋狀滾動(dòng)
• 滾動(dòng)過程中文字大小變化
• 動(dòng)畫過程無縫鏈接
• 兩行文字滾動(dòng)

實(shí)現(xiàn)過程

文字展示

為了方便更改文案將文案定義變量，通過JS代碼動(dòng)態(tài)創(chuàng)建DOM，定義文案、螺旋的角度以及動(dòng)畫的持續(xù)時(shí)間：

const words = "螺旋文字滾動(dòng)特效";
const ANGLE = 360;
const ANIMATION_DURATION = 4000;

將文案創(chuàng)建元素添加到頁面中：

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)));
});

因?yàn)橛?行文字滾動(dòng)，所以這里添加了2個(gè)spiral。

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

給 spiral 設(shè)置flex布局，此時(shí)的頁面效果如下：

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

圖片

讓文字動(dòng)起來

這里的動(dòng)畫基于CSS Houdini @property實(shí)現(xiàn)，首先定義一個(gè)自定義屬性--angle，接受角度值，初始值為0度。

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

設(shè)置關(guān)鍵幀動(dòng)畫，修改定義的--angle屬性從0度旋轉(zhuǎn)到360度。

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

給每個(gè)文字的增加animation動(dòng)畫關(guān)聯(lián)定義的關(guān)鍵幀動(dòng)畫spiral。

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

重點(diǎn)代碼transform變換，使用transform屬性結(jié)合calc函數(shù)和三角函數(shù)來實(shí)現(xiàn)Y軸的正弦波形偏移和縮放效果。

同時(shí)在動(dòng)畫中應(yīng)用了前面定義的spiral動(dòng)畫。結(jié)合這兩個(gè)函數(shù)，transform 屬性效果如下：

• Y 軸位移: 元素根據(jù) --angle 的值在 Y 軸上上下移動(dòng)，形成波動(dòng)效果。
• 縮放效果: 元素的大小根據(jù) --angle 的值進(jìn)行動(dòng)態(tài)縮放，形成從小到大或從大到小的變化。

此時(shí)的動(dòng)畫效果：

圖片

螺旋滾動(dòng)

此時(shí)我們的文字已經(jīng)滾動(dòng)起來了，只需要最后一步關(guān)鍵的代碼就可以實(shí)現(xiàn)螺旋滾動(dòng)效果，仔細(xì)看原始效果就能發(fā)現(xiàn)其實(shí)每個(gè)文字滾動(dòng)的動(dòng)畫軌跡都是一樣的，唯一的區(qū)別就是執(zhí)行的動(dòng)畫延遲時(shí)間不同，形成了一個(gè)波動(dòng)起伏的效果。

增加延遲動(dòng)畫CSS，由于我們的文字是通過JS創(chuàng)建的，所以需要在 createElement 中增加以下代碼即可，根據(jù)動(dòng)畫持續(xù)時(shí)間和當(dāng)前文字索引計(jì)算延遲時(shí)間：

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

由于 --angle 設(shè)置了關(guān)鍵幀動(dòng)畫，是一個(gè)動(dòng)態(tài)變化的變量，這段代碼會(huì)使得元素在頁面上呈現(xiàn)出螺旋或波動(dòng)的動(dòng)畫效果，增強(qiáng)視覺吸引力。

此時(shí)我們的動(dòng)畫效果基本就完成了，如下所示：

圖片

兼容火狐

由于Firefox不支持@property動(dòng)畫，原作者寫了火狐兼容代碼，使用JavaScript來實(shí)現(xiàn)動(dòng)畫效果。

定義一個(gè)animation動(dòng)畫函數(shù)，使用 requestAnimationFrame 方法實(shí)現(xiàn)平滑的動(dòng)畫效果。

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

在動(dòng)畫函數(shù)中遍歷所有文字元素來設(shè)置動(dòng)畫。

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

計(jì)算Y軸偏移和縮放，使用三角函數(shù)計(jì)算每個(gè)元素的Y軸偏移量和縮放比例:

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

設(shè)置動(dòng)畫延遲，根據(jù)元素索引和數(shù)據(jù)屬性data-offset計(jì)算動(dòng)畫的延遲時(shí)間。

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

最后動(dòng)態(tài)設(shè)置CSS變換屬性transform來應(yīng)用Y軸偏移和縮放。在定時(shí)器中使用delay延遲時(shí)間執(zhí)行動(dòng)畫。

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

火狐瀏覽器執(zhí)行動(dòng)畫函數(shù)。

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

if(isFirefox){
  animation();
}

最后

通過結(jié)合 JavaScript 和 CSS，我們成功實(shí)現(xiàn)了一個(gè)動(dòng)態(tài)的螺旋文字滾動(dòng)特效。該特效不僅展示了字符的動(dòng)態(tài)變化，還通過延遲時(shí)間結(jié)合動(dòng)畫效果增強(qiáng)了視覺吸引力。本質(zhì)實(shí)現(xiàn)這個(gè)效果是不需要 JavaScript，為了兼容火狐和動(dòng)態(tài)創(chuàng)建文案DOM才使用了相關(guān) JavaScript。有興趣的可以嘗試使用純CSS實(shí)現(xiàn)這個(gè)炫酷的螺旋文字滾動(dòng)特效。