如何实现类似thisiskiosk.com的滚动联动环形文字动效？

云上老周

2026-5-26

嘿，你已经搞定了环形文字的基础效果，想要实现滚动时的文字联动其实不难，核心就是把页面滚动的距离和环形文字的动画参数绑定起来，下面给你一套基于你现有代码的完整实现方案，直接改就能用：

实现环形文字滚动联动动效方案

核心思路

监听页面的scroll事件，实时获取当前滚动的垂直距离
将滚动距离转换成0-1的进度比例，再映射到环形文字的旋转角度或位置偏移上
用requestAnimationFrame优化滚动事件的触发频率，让动画更丝滑不卡顿

完整代码实现

HTML 结构

（在你原有代码基础上，添加滚动占位内容，让页面能滚动起来）

<!-- 页面滚动容器，承载所有内容 -->
<div class="page-content">
  <!-- 占位区块，让页面有足够的滚动高度 -->
  <div class="scroll-spacer"></div>
  
  <!-- 你的环形文字容器 -->
  <div class="container">
    <div class="circle-text" data-text="WE ARE OPEN"></div>
  </div>
  
  <div class="scroll-spacer"></div>
</div>

CSS 样式

（保留你原有环形文字的样式，新增滚动相关样式并调整容器定位）

/* 页面滚动容器，设置足够的最小高度 */
.page-content {
  min-height: 300vh;
  position: relative;
}

/* 占位区块，撑开页面高度 */
.scroll-spacer {
  height: 100vh;
}

/* 环形文字容器改为固定定位，滚动时留在视野中心 */
.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
}

/* 你的原有环形文字基础样式 */
.circle-text {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 单个文字字符的样式（如果是JS生成的span） */
.circle-text span {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  transform-origin: center;
}

JavaScript 逻辑

（整合你原有环形文字初始化逻辑，新增滚动联动代码）

// 获取环形文字元素
const circleText = document.querySelector('.circle-text');
// 计算页面可滚动的总高度
const totalScrollableHeight = document.documentElement.scrollHeight - window.innerHeight;

// 初始化环形文字排列（你的原有逻辑）
function initCircleText() {
  const text = circleText.dataset.text;
  circleText.innerHTML = '';
  const charCount = text.length;
  const anglePerChar = 360 / charCount;

  // 逐个创建文字元素并排列成环形
  for (let i = 0; i < charCount; i++) {
    const span = document.createElement('span');
    span.textContent = text[i];
    const rotateAngle = i * anglePerChar;
    // 调整translate的数值可以改变文字到中心的距离
    span.style.transform = `rotate(${rotateAngle}deg) translate(130px) rotate(-${rotateAngle}deg)`;
    circleText.appendChild(span);
  }
}

// 滚动联动核心函数
function syncCircleWithScroll() {
  // 获取当前滚动距离
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  // 计算滚动进度（0 = 顶部，1 = 底部）
  const scrollProgress = currentScroll / totalScrollableHeight;

  // 滚动时让环形文字旋转，这里的360可以调整：数值越大，滚动一圈文字转得越快
  const rotateAmount = scrollProgress * 360;
  // 应用旋转效果到环形文字容器
  circleText.style.transform = `rotate(${rotateAmount}deg)`;

  // 如果想要更精细的效果（比如每个字符单独移动），可以取消下面的注释
  // const chars = circleText.querySelectorAll('span');
  // chars.forEach((char, index) => {
  //   const baseAngle = index * (360 / chars.length);
  //   char.style.transform = `rotate(${baseAngle + rotateAmount}deg) translate(130px) rotate(-${baseAngle + rotateAmount}deg)`;
  // });
}

// 初始化执行
initCircleText();

// 监听滚动事件，用requestAnimationFrame优化性能
window.addEventListener('scroll', () => {
  requestAnimationFrame(syncCircleWithScroll);
});

可自定义调整的点

旋转速度：修改scrollProgress * 360里的360，比如改成720就是滚动一次页面文字转两圈，负数可以让文字反向旋转
文字距离中心的距离：调整translate(130px)里的130数值，越大文字离中心越远
联动方式：如果不想用旋转，也可以改成上下偏移，比如把rotate(${rotateAmount}deg)换成translateY(${rotateAmount * 50}px)，让文字随滚动上下移动

内容的提问来源于stack exchange，提问作者Noel