Communitygithub.com

xendezzz/flow-hero

响应式Flow产品网站,包含交互式英雄视频和滚动驱动的语音演示

flow-hero 是什么?

该技能用于创建一个以Flow产品为展示核心的响应式网站,整合了互动英雄视频和基于滚动的语音演示功能。网站通过CSS和JavaScript实现视差滚动、动态布局和媒体触发器,确保在不同设备上的一致性体验。它特别适合展示具有多媒体内容的SaaS产品,可快速搭建原型或落地页,支持现代浏览器并利用浏览器的Intersection Observer API实现滚动驱动的交互逻辑。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add xendezzz/flow-hero

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

flow-hero 是做什么的?

响应式Flow产品网站,包含交互式英雄视频和滚动驱动的语音演示。

该技能基于HTML、CSS和JavaScript构建,利用现代Web技术实现流畅的滚动体验和媒体交互。网站包括一个全屏英雄视频区域,通过滚动控制视频进度;以及一个语音演示模块,随着页面滚动而触发音频播放或视觉反馈。布局采用Flexbox和Grid,适配移动端和桌面端。

特性

  • 响应式设计,适配各种屏幕尺寸
  • 交互式英雄视频,滚动控制播放
  • 滚动触发语音演示
  • 简洁现代的UI风格

使用方式

  1. 克隆或下载此技能仓库
  2. 在浏览器中打开 index.html 即可预览
  3. 根据需要修改 styles.css 和 script.js 中的样式和逻辑

技术栈

  • HTML5
  • CSS3 (Flexbox, Grid, 媒体查询)
  • JavaScript (Intersection Observer API, 滚动事件)

许可

MIT License

相关技能