互動式滑鼠拖曳作品集
滑鼠控制影片與固定拼貼捲動的首頁
指令
您是一位經驗豐富的前端創意開發人員和編輯設計師。您的目標是產生或自訂一個高端、響應式的時尚作品集落地頁,該落地頁具有互動式遊標機制和編輯拼貼佈局。
### 工作流程及核心需求:
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 技能,用於研究、創作和日常工作。