偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

螺旋文字滾動(dòng)特效源碼解析,你學(xué)會(huì)了嗎?

開(kāi)發(fā) 前端
通過(guò)結(jié)合 JavaScript 和 CSS,我們成功實(shí)現(xiàn)了一個(gè)動(dòng)態(tài)的螺旋文字滾動(dòng)特效。該特效不僅展示了字符的動(dòng)態(tài)變化,還通過(guò)延遲時(shí)間結(jié)合動(dòng)畫效果增強(qiáng)了視覺(jué)吸引力。

圖片圖片

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

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

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

文字展示

為了方便更改文案將文案定義變量,通過(guò)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)建元素添加到頁(yè)面中:

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í)的頁(yè)面效果如下:

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

圖片圖片

讓文字動(dòng)起來(lái)

這里的動(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ù)來(lái)實(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)起來(lái)了,只需要最后一步關(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,由于我們的文字是通過(guò)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ì)使得元素在頁(yè)面上呈現(xiàn)出螺旋或波動(dòng)的動(dòng)畫效果,增強(qiáng)視覺(jué)吸引力。

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

圖片圖片

兼容火狐

由于Firefox不支持@property動(dòng)畫,原作者寫了火狐兼容代碼,使用JavaScript來(lái)實(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ù)中遍歷所有文字元素來(lái)設(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來(lái)應(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();
}

最后

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

責(zé)任編輯:武曉燕 來(lái)源: 南城大前端
相關(guān)推薦

2023-02-24 08:32:50

CSS漸變屬性

2023-08-26 21:34:28

Spring源碼自定義

2023-06-26 13:08:52

GraphQL服務(wù)數(shù)據(jù)

2022-10-18 17:59:46

Bootstrap源碼父類

2023-12-27 07:31:45

json產(chǎn)品場(chǎng)景

2024-10-11 09:15:33

2024-02-05 13:52:30

?Thread對(duì)象強(qiáng)引用

2025-01-02 10:02:44

2024-01-19 08:25:38

死鎖Java通信

2024-02-04 00:00:00

Effect數(shù)據(jù)組件

2023-07-26 13:11:21

ChatGPT平臺(tái)工具

2023-01-10 08:43:15

定義DDD架構(gòu)

2022-12-22 08:14:54

2024-09-06 07:29:05

2025-01-14 08:32:55

JWT令牌.NET

2023-08-01 12:51:18

WebGPT機(jī)器學(xué)習(xí)模型

2024-01-02 12:05:26

Java并發(fā)編程

2023-10-10 11:04:11

Rust難點(diǎn)內(nèi)存

2024-05-06 00:00:00

InnoDBView隔離

2023-01-30 09:01:54

圖表指南圖形化
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)