安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
GSAP神秘字母板,输入提问与指示器寻字动画源码
编号:幽灵问答板

GSAP神秘字母板,输入提问与指示器寻字动画源码

大小 520 KB
总文件 11 个
发布 2026-10-27
更新 2026-10-27
架构 GSAP
分类 前端资源 - GSAP动画
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

这是一款基于GSAP、原生 JavaScript 与分层图像技术实现的输入提问后自动寻字的神秘字母板。旧纸质字母板上方放着一枚指示器,输入问题后,它沿预设字母坐标移动,镜片中能看到局部放大,光晕与墨迹跟随变化。回答来自本地词库,脚本还把单词转成幽灵语言,再按字符安排移动顺序,适合万圣节和叙事互动页面。

神秘字母板如何让寻字过程有节奏

  • 指示器按字符依次寻位。字母、特殊词尾和结束位置都有坐标,移动不是随机游走。

  • 镜片与原图同步。局部放大层随指示器变化,配合亮光与暗角增强桌面氛围。

  • 重复字母有独立处理。脚本会在重复落点加入小幅环绕,避免连续字符看起来停住。

预设回答怎样变成GSAP移动步骤

输入先按英文问题类型选择词库,再通过固定的字符散列得到词条;输出转换为幽灵语言后拆成步骤。GSAP 时间线依次安排移动、停顿、显字和结束动作。坐标绑定原始图片尺寸,替换板图时必须重新标定,不能只改图片路径。

const out = ghostTalk(word);

字母板的词库、坐标与纹理如何替换

字母位置和回答数组位于 script.js 的 SPOTS 与 ANSWERS,词语转换规则在 ghosttalk.js;板面、指示器与墨迹纹理为本地图片,样式在 style.css。改成其他语言时,要同时考虑字形位置、输出拆分和镜片取样。

神秘问答板的语言与回答能力边界

它会理解问题或预测结果吗?

不会。回答由预设词库和简单规则生成,不连接语言模型,也不提供预测能力。

可以输入中文问题吗?

当前问题分类和字符寻位围绕英文设计。中文可以显示在输入区,但不会获得中文语义分析或中文板面拼字。

为什么换板图后指示器偏离字母?

坐标依赖原图比例与字母位置,换图后需要重标 SPOTS,并检查镜片中心与指示器锚点。

适合万圣节活动、互动故事和字母板动画实验。下载后可查看神秘字母板的完整结构与参数,按自己的内容继续调整。

模板目录结构

    最新资源

    生鲜食品与零售商城 HTML 响应式网站模板

    格罗鲜

    生鲜食品与零售商城 HTML 响应式网站模板
    创意机构与作品集 HTML 响应式网站模板,支持明暗配色

    诺里奥

    创意机构与作品集 HTML 响应式网站模板,支持明暗配色
    GSAP神秘字母板,输入提问与指示器寻字动画源码

    幽灵问答板

    GSAP神秘字母板,输入提问与指示器寻字动画源码
    SVG街机风数据图表,霓虹柱状折线与音效交互源码

    霓虹柱线图

    SVG街机风数据图表,霓虹柱状折线与音效交互源码
    React应用图标环,十二枚图标三维旋转展示特效

    旋转图标墙

    React应用图标环,十二枚图标三维旋转展示特效
    Three.js验证码 OTP 动效,粒子旋转地球与输入反馈组件

    粒子验证卡

    Three.js验证码 OTP 动效,粒子旋转地球与输入反馈组件