螺旋文字滚动特效源码解析

如图所示,今天看到一个很炫酷的双文字螺旋滚动特效,两行文字呈螺旋状变化,在网站中这样的效果对用户很有吸引力。本文将基于原网站解析如何实现这个炫酷的效果,基于这个动图可以分析出需要实现的要点:

  • 文字呈螺旋状滚动
  • 滚动过程中文字大小变化
  • 动画过程无缝链接
  • 两行文字滚动

实现过程

文字展示

为了方便更改文案将文案定义变量,通过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实现这个炫酷的螺旋文字滚动特效。


看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

点赞 0
头像

南城

城南花已开,愿君今安在

暂无评论

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。

相关推荐

纯CSS实现海浪文字效果

如图所示,这是一个很炫酷的文字波动效果,文字呈现出一个海浪波动的效果,这样的动画效果可以显著加强文案本身的含义 …

纯CSS实现炫酷文本时钟

如图所示这是一个纯本文时钟效果,和传统的时钟不一样,没有表盘,也没有完整到每一分钟的数字表示当前时刻。 在这个 …

纯CSS动态渐变文本特效

如图所示,这是一个炫酷的文本渐变效果,如同冰岛的极光一般。本次的文章让我们逐步分解代码,了解其实现原理。 基于 …

一个炫酷的头像悬停效果 2

基于上次翻译的 🔥🔥一个炫酷的头像悬停效果 收获了不少同学的喜欢,原作者近期进行了优化升级。本文将升级后的核心 …