{"id":51445130,"url":"https://github.com/torifo/animation-layered-parallax","last_synced_at":"2026-07-05T15:30:39.892Z","repository":{"id":364705961,"uuid":"1252898748","full_name":"torifo/animation-layered-parallax","owner":"torifo","description":"Animation study — layered parallax product page. Scroll-driven multi-layer depth + 3D product micro-rotation + hairline spec annotations. Apple/B\u0026O-style. Pure HTML/CSS/JS, no WebGL.","archived":false,"fork":false,"pushed_at":"2026-06-14T05:09:25.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-14T07:09:32.010Z","etag":null,"topics":["animation","css","css-animation","design-study","github-pages","html","javascript","parallax","scrollytelling","web-design"],"latest_commit_sha":null,"homepage":"https://torifo.github.io/animation-layered-parallax/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/torifo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-29T01:31:17.000Z","updated_at":"2026-06-14T05:09:29.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/torifo/animation-layered-parallax","commit_stats":null,"previous_names":["torifo/animation-layered-parallax"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/torifo/animation-layered-parallax","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-layered-parallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-layered-parallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-layered-parallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-layered-parallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/torifo","download_url":"https://codeload.github.com/torifo/animation-layered-parallax/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-layered-parallax/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35160046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","css-animation","design-study","github-pages","html","javascript","parallax","scrollytelling","web-design"],"created_at":"2026-07-05T15:30:39.745Z","updated_at":"2026-07-05T15:30:39.879Z","avatar_url":"https://github.com/torifo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# D·Sc · パララックス層スクロール（プロダクトページ版）\n\n\u003e 多層パララックスに**製品の 3D 微回転＋スペック注釈の指差し**を乗せた scrollytelling。実イラストではなく **UI 要素**（製品・注釈・CTA）を深度レイヤーで動かす製品紹介ページの実用形。デモは架空オーディオブランド『HARMONIC LAB / MARK I』。\n\n**Live demo**: `./index.html`\n\n## 概要\n\n| 項目 | 内容 |\n|---|---|\n| ジャンル | D · 3D・空間 |\n| 用途 | Sc · スクロール連動 |\n| 主な参考 | Apple AirPods Max, Bang \u0026 Olufsen, Three.js Journey |\n| 依存 | なし（Pure HTML + CSS + Vanilla JS） |\n| 推奨配置 | プロダクト紹介ページ、ブランドのオリジンストーリー、長尺記事 |\n\n\n## スキルとして導入 / Install as a skill\n\nこのリポジトリは Claude Code / Codex CLI 共通の **`SKILL.md`**（オープン標準）を同梱しており、AI エージェントのスキルとして使えます。リポジトリ自体をスキルディレクトリへリンクするだけです。\n\nThis repo ships a cross-agent **`SKILL.md`** (open standard) usable by both Claude Code and Codex CLI. Just link the repo into the agent's skills directory.\n\n```bash\n# Claude Code\nln -s \"$(pwd)\" ~/.claude/skills/anim-layered-parallax\n# Codex CLI\nln -s \"$(pwd)\" ~/.codex/skills/anim-layered-parallax\n```\n\nエージェントを再起動すると `description` に基づき自動でマッチします（スキル名: `anim-layered-parallax`）。\nRestart the agent; it is matched automatically by the skill's `description` (skill name: `anim-layered-parallax`).\n\n## 仕組み（位置ベース・汎用 transform）\n\n1. 背の高い `.parallax[data-parallax]`（既定 `--pa-section: 400vh`）の中で `.pa-stage` が `position:sticky`\n2. JS が進捗 `p = -section.top / (section.height - viewport)` を 0..1 で算出\n3. **任意要素**に `data-speed` / `data-rotate-y` / `data-rotate-x` / `data-scale` を付けると、JS が 1 本の `transform` にまとめて毎フレーム反映：\n   - `translate3d(0, -p × speed × RANGE, 0)`\n   - `rotateY(p × value deg)`\n   - `rotateX(p × value deg)`\n   - `scale(1 + p × value)`\n4. `[data-from][data-to]` の注釈/キャプションは進捗範囲内で `.is-on`（fade + slide）\n5. `[data-pct]` が進捗テキスト、`[data-progress]` が進捗バーを更新\n\n\u003e 同 B 流体の B·Sc（ウェーブパララックス）は**速度ベース**、こちらは**位置ベース**。止めれば動きも止まり、巻き戻せば逆再生する。\n\n## デモ構成\n\n| レイヤー | 役割 |\n|---|---|\n| `.pa-bg` | 静的グラデ + 装飾の放射光 |\n| `.pa-blob--a/b` | 大きなぼかしブロブ（speed 0.08 / 0.18） |\n| `.pa-spot` | スポットライト（speed 0.10） |\n| `.pa-product-wrap` | 製品のラッパー（speed 0.34、緩やかに上昇） |\n| `.pa-product` | 製品本体（rotateY 22 / rotateX -6 / scale +.06） |\n| `.pa-annot × 4` | スペック注釈（章ごとに出現＆製品を指す線） |\n| `.pa-progress` / `[data-pct]` | 進捗バー / テキスト |\n\n## 組み込み手順\n\n### 1. 2 ファイルをコピー\n\n`style.css` / `script.js` を移植先へ。外部依存ゼロ。\n\n### 2. マークアップ\n\n```html\n\u003csection class=\"parallax\" data-parallax\u003e\n  \u003cdiv class=\"pa-stage\"\u003e\n    \u003c!-- 任意の深度レイヤー（speed = 0…1） --\u003e\n    \u003cdiv class=\"bg-blob\" data-speed=\"0.1\"\u003e\u003c/div\u003e\n\n    \u003c!-- 中央の主役（rotate + scale も付与可） --\u003e\n    \u003cdiv class=\"product-wrap\" data-speed=\"0.34\"\u003e\n      \u003cdiv class=\"product\" data-rotate-y=\"22\" data-rotate-x=\"-6\" data-scale=\".06\"\u003e…\u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003c!-- 章ごとの注釈 --\u003e\n    \u003caside class=\"annot\" data-from=\".06\" data-to=\".34\"\u003e…\u003c/aside\u003e\n    \u003caside class=\"annot\" data-from=\".26\" data-to=\".55\"\u003e…\u003c/aside\u003e\n\n    \u003c!-- 任意：進捗 UI --\u003e\n    \u003cspan data-pct\u003e0%\u003c/span\u003e\n    \u003cdiv data-progress\u003e\u003cspan\u003e\u003c/span\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n\u003cscript src=\"./layered-parallax.js\"\u003e\u003c/script\u003e\n```\n\n- `data-speed`：奥は小さく、手前ほど大きく\n- `data-rotate-y/x`：進捗 0→1 で 0→指定度。微回転 10〜30 度くらいが自然\n- `data-scale`：進捗 0→1 で 0→指定の加算。`.06` くらいで「少し迫ってくる」\n- `data-from/to`：進捗範囲（0..1）。重ねて配置で章送りを滑らかに\n\n## CSS 変数\n\n| 変数 | 役割 | デフォルト |\n|---|---|---|\n| `--pa-section` | セクション全体の高さ（=スクロール量） | `400vh` |\n| `--pa-range` | レイヤー最大移動量の基準（vh / px） | `50vh` |\n\n## アクセシビリティ\n\n`prefers-reduced-motion: reduce` のとき、レイヤー・製品の `transform` を停止し、注釈の出現だけ残す。\n\n## 制約 / 既知の挙動\n\n- スクロール位置に張り付くため逆再生する（仕様）\n- レイヤー数が増えると DOM コスト増。6 層程度を目安\n- `data-rotate-y` で大きな角度を与えると、製品の構成（CSS シェイプ）次第で歪んで見えるため、20° 前後を推奨\n\n## ライセンス\n\nANIMATION DESIGN STUDY の一部として公開（コピペ自由）。\n\n---\n\n## 変更履歴\n\n### v0.4 — 2026-05-29 · 立体感補強と見切れ修正\n\n**製品の円柱表現**\n- 本体グラデを縦のみ → **横方向の円柱シェード**（端 `#050507` → 中央 `#3c3c44` → 端）に置き換え。「中央が明るく端が暗い」円柱の核心を実装\n- 上に天光（明）・下に地暗（暗）を重ね、二方向のライティングで曲面を強調\n- 縫い目（接合線）を上下 2 本（白の薄い水平グラデ）\n\n**キャップのお椀化を解除**\n- キャップ内側下端の暗いグラデを削除（凹んだ皿に見えていた原因）\n- 上のスペキュラ + 緩い球面シェードに作り直し、上端にメタリックなふち（`inset 0 2px 0 rgba(255,255,255,.55)`）\n\n**メッシュを「筒に巻く」**\n- 上下フェードのみ → **楕円 radial マスク**で左右端もフェード。ドット模様が円柱に巻きついて見える\n\n**ライティング**\n- specular shine をワイドな左サイドハイライト → 中央やや左の縦長ソフト specular（blur 7px）\n- rim を青みがかった控えめなトーンに調整、位置と幅を微調整\n\n**3D 構造**\n- `.pa-product` に `transform-style: preserve-3d` を付与\n- cap +8px / shine +5px / led +7px / rim +2px の `translateZ` で本物の前後関係を作り、回転時に視差で動く\n- 製品全体に `drop-shadow(0 60px 50px …)` の深い落ち影\n\n**見切れ修正**\n- サイトヘッダー（`LAYERED PARALLAX` 行、`position:sticky`）がステージ天板に被っていた問題：\n  - ステージの `top` を `0` → `var(--site-header-h, 56px)` に\n  - ステージ `height` を `100vh` → `calc(100vh - var(--site-header-h))` に\n- `.pa-product-wrap` に `padding:64px clamp(1rem,4vw,3rem)` を入れて topbar/bottombar 領域を常時確保\n- 製品サイズ `clamp(200px,28vw,320px)` → `clamp(180px,24vw,270px)`、`aspect-ratio .56` → `.58`\n- 製品ラッパーの `data-speed` を `0.34` → `0.12`（スクロールでの上方移動を抑え、進行中盤でキャップが topbar に隠れない）\n\n### v0.3 — 2026-05-29 · Apple/B\u0026O 系プロダクトページにリファイン\n\n- マゼンタ/青のブロブ系カラフル背景を排除し、ほぼ真っ黒のステージ（`#0c0c0e → #060608`）に\n- ステージ上下にヘアライン区切り＋小モノ文字（`HARMONIC LAB · MARK I` / `Designed in Tokyo. Acoustic at home.`）\n- 注釈：背景パネル廃止 → 完全透明＋ヘアラインで製品を指す UI に。出現時に `scaleX` で線が右→左に伸び、最後にマゼンタの 7px ドットが灯る\n- intro/after のタイポを Apple 級に大型化（H1 `clamp(4rem, 16vw, 10.5rem)`、`letter-spacing -.04em`）\n- CTA は色反転ホバーのみの抑制設計\n- 進捗バーを 3px → 1px のヘアラインに\n\n### v0.2 — 2026-05-29 · 実用文脈の差し替え（mountains → product page）\n\n- 山のイラスト（mountains scrollytelling）を廃し、架空オーディオブランド **HARMONIC LAB / MARK I** の product page に転換\n- 中央に CSS で組んだ円柱スピーカー、スクロールで 3D 微回転＋わずかなスケール\n- スペック注釈 × 4（DRIVER 50mm / WEIGHT 320g / BATTERY 18h / MATERIAL Recycled Al）が章ごとに出現し、製品を線で指す\n- JS を `data-speed` 専用 → `data-speed` / `data-rotate-y` / `data-rotate-x` / `data-scale` を読み 1 本の transform に集約する汎用版へ拡張\n- 一段下に `Pre-order · Spec Sheet` の CTA を配置\n\n### v0.1 — 2026-05-29 · 初版（layered mountain parallax）\n\n- 空 / 遠山 / 中景 / 霧 / 近景 / 草の 6 層を異速度で動かす scrollytelling\n- 3 章のキャプション（`data-from / data-to`）と進捗バー\n- 架空フィールドノート『北アルプス、霧の朝』として実装（後に v0.2 で製品ページに差し替え）\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Fanimation-layered-parallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorifo%2Fanimation-layered-parallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Fanimation-layered-parallax/lists"}