文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

螺旋文字滚动特效源码解析,你学会了吗?

2024-11-29 19:56

关注

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

实现过程

文字展示

为了方便更改文案将文案定义变量,通过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。

给 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: '';
    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 属性效果如下:

此时的动画效果:

图片

螺旋滚动

此时我们的文字已经滚动起来了,只需要最后一步关键的代码就可以实现螺旋滚动效果,仔细看原始效果就能发现其实每个文字滚动的动画轨迹都是一样的,唯一的区别就是执行的动画延迟时间不同,形成了一个波动起伏的效果。

增加延迟动画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();
}

最后

通过结合 JavaScript 和 CSS,我们成功实现了一个动态的螺旋文字滚动特效。该特效不仅展示了字符的动态变化,还通过延迟时间结合动画效果增强了视觉吸引力。本质实现这个效果是不需要 JavaScript,为了兼容火狐和动态创建文案DOM才使用了相关 JavaScript。有兴趣的可以尝试使用纯CSS实现这个炫酷的螺旋文字滚动特效。

来源:南城大前端内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯