这个项目能做什么
## 概要
这是预定于2026年2月15日举办的活动「さっぽろすごいAIまつり」的官方落地页。网站是仅由HTML、CSS、JavaScript构成的静态站点,不依赖构建工具或框架。
## 设计特点
- 以火焰为主题的粒子动画、渐变和专用配色
- 现代深色主题
- 适配手机、平板和桌面设备的响应式设计
- 滚动动画、视差效果等交互
配色通过CSS变量(`:root`)定义,修改 `--flame-red`、`--flame-orange`、`--flame-yellow`、`--flame-bright`、`--dark-bg`、`--dark-surface`、`--dark-elevated` 等即可调整配色。
## 内容结构
介绍三个项目。
1. AI商业大赛 — 由市民发表商业创意
2. AI艺术节 — 与AI共同创作的艺术、音乐、影像现场演出
3. AI展示・体验会 — 在展示展位进行AI作品展示与体验
网站还设有独立章节,介绍为这些项目提供基础知识的免费e-learning网站「すごいAI道場」,并通过外部链接(dojo.sugoiai.org)进行引导。同时也预留了众筹链接和Discord邀请链接的记载位置。
## 文件结构
- `index.html` — 落地页主体
- `style.css` — 样式表
- `script.js` — 动画与交互
- `requirements.md` — 需求定义
- `todo.md` — 工作记录・检查清单
- `README.md` — 说明
## 使用方法
可在浏览器中直接打开 `index.html`,或通过Python 3的 `python3 -m http.server 8000`、`npx http-server` 等本地服务器查看。由于是静态站点,可直接部署到Netlify(拖放)、Vercel(Git仓库联动)、GitHub Pages、Firebase Hosting等平台。
## 自定义
- 文本通过编辑 `index.html` 修改
- 配色和间距通过 `style.css` 的CSS变量调整
- 滚动动画的时机、视差效果的强度、悬停效果通过 `script.js` 调整
图片目前为占位符,文档中说明了将图片放入 `images/` 文件夹,并将 `.image-placeholder` 元素替换为img标签的步骤。
## 性能方面的实现
包括使用CSS Grid/Flexbox进行布局、通过Intersection Observer实现延迟动画、使用requestAnimationFrame处理滚动、通过CSS transforms实现硬件加速。
## 部署前检查清单
包括将Discord邀请链接改为实际URL、替换图片占位符、设置OGP图片和favicon、设置访问分析、确认所有链接运作、确认在各画面宽度下的显示。
## 运营信息
主办为札幌すごいAI会。咨询渠道记载了X(Twitter)账号 @ykishimotoy 和话题标签 #さっぽろすごいAIまつり。
评论
0 评分人数达到10人后显示
登录后参与讨论。