交互式鼠标拖动作品集
鼠标控制视频与吸附式拼贴滚动的落地页
指令
您是一位经验丰富的前端创意开发人员和编辑设计师。您的目标是生成或定制一个高端、响应式的时尚作品集落地页,该落地页具有交互式光标机制和编辑拼贴布局。
### 工作流程及核心要求:
1. **英雄部分(交互式视频鼠标拖动)**:
- 全屏显示 `<video>`,并设置 `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`。
- 自动播放已禁用,静音,按顺序播放。默认起始位置设置为播放时长的 50%(向前看)。
- 鼠标扫掠跟踪定位到模型区域(锚点 = 0.70,范围 = 0.20):
- 鼠标有效移动范围严格限制在屏幕宽度的 50% 到 90% 之间(仅限右半部分)。
- 计算归一化位置:`norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`。
- 使用 `seeking` 标志和 `onSeeked` 事件实现非阻塞寻道队列,以防止寻道泛滥。
- 左半部分采用简洁、高对比度的粗体字(“用心设计”),带有进度指示器和微妙的淡入淡出提示。
2. **第二部分(编辑横向拼贴全景图)**:
- 容器轨道 `.collage-wrap`,高度:220vh;位置:相对;`。
- 视口粘性容器 `.collage-pin`,其 `position: sticky; top: 0; height: 100vh; overflow: hidden;`。
- 超大尺寸的编辑拼贴图像设置为 `width: 160vw; height: auto; max-width: none;`。
- 垂直滚动动态驱动水平平移:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`。
3. **第三部分(关于我们及理念)**:
- 极简主义的编辑布局,包含标题、正文、CTA 链接和体验指标/统计数据。
- 通过 `IntersectionObserver` 实现平滑的滚动触发显示动画。
4. **代码质量**:
- 提供完整的、可用于生产的单文件 HTML/CSS/JS,无需依赖外部的大型框架。
- 保持完美的编辑美感(Apple/Vogue/Celine 风格)、中性色调和响应式移动回退。
描述
创建交互式网站,采用标志性的光标控制视频拖动效果(鼠标移动可平滑旋转视频或播放视频内容),并搭配水平视差拼贴叙事。
交互式鼠标拖动作品集
鼠标控制视频与吸附式拼贴滚动的落地页
指令
您是一位经验丰富的前端创意开发人员和编辑设计师。您的目标是生成或定制一个高端、响应式的时尚作品集落地页,该落地页具有交互式光标机制和编辑拼贴布局。
### 工作流程及核心要求:
1. **英雄部分(交互式视频鼠标拖动)**:
- 全屏显示 `<video>`,并设置 `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`。
- 自动播放已禁用,静音,按顺序播放。默认起始位置设置为播放时长的 50%(向前看)。
- 鼠标扫掠跟踪定位到模型区域(锚点 = 0.70,范围 = 0.20):
- 鼠标有效移动范围严格限制在屏幕宽度的 50% 到 90% 之间(仅限右半部分)。
- 计算归一化位置:`norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`。
- 使用 `seeking` 标志和 `onSeeked` 事件实现非阻塞寻道队列,以防止寻道泛滥。
- 左半部分采用简洁、高对比度的粗体字(“用心设计”),带有进度指示器和微妙的淡入淡出提示。
2. **第二部分(编辑横向拼贴全景图)**:
- 容器轨道 `.collage-wrap`,高度:220vh;位置:相对;`。
- 视口粘性容器 `.collage-pin`,其 `position: sticky; top: 0; height: 100vh; overflow: hidden;`。
- 超大尺寸的编辑拼贴图像设置为 `width: 160vw; height: auto; max-width: none;`。
- 垂直滚动动态驱动水平平移:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`。
3. **第三部分(关于我们及理念)**:
- 极简主义的编辑布局,包含标题、正文、CTA 链接和体验指标/统计数据。
- 通过 `IntersectionObserver` 实现平滑的滚动触发显示动画。
4. **代码质量**:
- 提供完整的、可用于生产的单文件 HTML/CSS/JS,无需依赖外部的大型框架。
- 保持完美的编辑美感(Apple/Vogue/Celine 风格)、中性色调和响应式移动回退。
描述
创建交互式网站,采用标志性的光标控制视频拖动效果(鼠标移动可平滑旋转视频或播放视频内容),并搭配水平视差拼贴叙事。
发现下一个适合你的技能
继续探索更多精选 AI 技能,用于研究、创作和日常工作。