/* ========================================================================== POTOMAK 2026 — オープニングアニメーション サイトに最初に入ったとき、ロゴが数秒出て消える演出。 決めごと(CLAUDE.md「オープニングアニメーション」参照): 出す場所: どのページでも 頻度: 1日1回(日付が変わったらまた見せる) 譲れない作り: この要素(#opening-animation)はJavaScriptだけが作る。HTMLには書かない。 そのため、このCSSは「もしJSがその要素を作ったら、こう見せる」という 指定でしかなく、JSが動かなければ何も表示されない(サイトは壊れない)。 さらに、消える処理自体はこのCSSのアニメーション(forwards指定)が 受け持つ。JSは「表示するかどうかの判断」と「要素を作る・後片付け」 だけを行うので、JS側で万一エラーが起きても、時間が来れば このアニメーションが自動的に画面を透明・操作可能な状態にしてくれる。 ========================================================================== */ /* * 読み込みが済むまで、時間の進みを止めておく * * CSSのアニメーションは、要素が出来た時点から時間を数えはじめる。 * ところがブラウザが実際に絵を出すのは、そのあと読み込みが * 一段落してから。回線が遅いと、絵が出たときには2秒のうち * 1秒が過ぎてしまっていて、途中から始まったように見える。 * * そこで、読み込みが済むまで に opening-hold を付けて * 時間を止めておき、済んだところで外して動かしはじめる。 * 止めている間はロゴが透明のままなので、紙色の画面だけが見える。 * * ヒーローのスローガンも一緒に止める。片方だけ進むと、 * 幕が引ける前にスローガンが出てしまうため。 * (外すのは opening-animation.php。念のための上限時間もそちらにある) */ html.opening-hold #opening-animation, html.opening-hold #opening-animation__logo, html.opening-hold .hero__title, html.opening-hold .hero__tagline, html.opening-hold .hero__scroll { animation-play-state: paused; } body.opening-lock { overflow: hidden; } #opening-animation { /* * ▼ 調整用のつまみ * * --opening-duration … 出はじめから消えきるまでの合計時間 * --opening-fade-in … ロゴが浮かび上がるのにかける時間 * --opening-fade-out … 幕とロゴが消えるのにかける時間 * * ロゴが出たまま止まっている時間は、この3つの引き算で決まる。 * 保持時間 = duration − fade-in − fade-out * いまは 2.0 − 0.7 − 1.0 = 0.3秒。 * * 合計2秒の中では、出はじめを短く、消えぎわを長く配分している。 * 消えるほうを削ると、幕が引ける瞬間がパッと切り替わって見えるため。 * * 保持時間はすでに短いので、fade-in / fade-out をこれ以上伸ばすときは * duration も一緒に増やすこと(足すと0になり、動きが重なって破綻する)。 */ --opening-duration: 2s; --opening-fade-in: 0.7s; --opening-fade-out: 1s; position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--color-paper); /* * 幕は最初から不透明。時間が来たら消えるだけなので、 * 「消える動き」だけを、その時刻に始まるよう遅らせて置いている。 * 遅れている間はこの指定が効かないため、幕は普通に画面を覆っている。 */ /* * 消え方は linear(等速)。 * ease系だと途中で速度が変わり、そこが「切り替わった瞬間」に見える。 * 幕の下からページが現れる場面では、等速のほうが滑らかに溶ける。 */ animation: opening-veil-out var(--opening-fade-out) linear forwards; animation-delay: calc(var(--opening-duration) - var(--opening-fade-out)); } /* * ロゴの大きさ。 * * 【重要】TOPページのヒーローにある鯨と、同じ大きさにしてある。 * オープニングが引けたあと、鯨はその場に残り、 * 真ん中の文字だけが「POTOMAK」からスローガンに入れ替わる、 * という見せ方をしているため。ここがずれると鯨が飛び跳ねて見える。 * * 235px という数字の根拠: * ヒーローの鯨は logo-mark の倍率0.784 → 300px × 0.784 = 235px。 * logo-full.svg は鯨が図版の全幅(185 / viewBox 184.72)を占めるので、 * ロゴ全体の幅＝鯨の幅になる。よって同じ235pxで一致する。 * * ヒーローの鯨の大きさを変えたら、必ずここも合わせること * (front-page.php の logo-mark の scale と、front-page.css の * .hero__tagline の幅も同じ比率で見直す)。 */ /* * ロゴは「浮かび上がる動き」と「消える動き」を別々に持たせている。 * 1つのアニメーションに詰め込むと、割合(%)でしか時間を指定できず、 * 「出だしだけゆっくりにする」といった調整ができないため。 * * 消える動きのほうは、その時刻が来るまで遅らせてある。 * 遅れている間は効かないので、ロゴは出たまま静止している。 */ #opening-animation__logo { width: 235px; height: auto; opacity: 0; animation: opening-logo-in var(--opening-fade-in) cubic-bezier(0.33, 0, 0.2, 1) forwards, opening-logo-out var(--opening-fade-out) linear forwards; animation-delay: 0s, calc(var(--opening-duration) - var(--opening-fade-out)); } /* * ロゴをTOPページの鯨に重ねているときの指定。 * * 中央そろえをやめ、位置と大きさはJSが測った値(inline style)に任せる。 * 拡大縮小も外している。わずかでも大きさが変わると、 * 幕が引けた瞬間に鯨が動いて見えるため、ここは純粋な明滅だけにする。 */ #opening-animation.is-aligned { display: block; } #opening-animation.is-aligned #opening-animation__logo { position: absolute; /* 大きさが変わると鯨が動いて見えるので、明滅だけにする */ animation-name: opening-logo-in-fade, opening-logo-out; } /* 重ねているとき用。位置も大きさも変えず、明るさだけで現れる */ @keyframes opening-logo-in-fade { from { opacity: 0; } to { opacity: 1; } } /* クリック・タップで即座に飛ばす */ #opening-animation.is-skipping { animation: none; transition: opacity 0.25s ease; opacity: 0; pointer-events: none; } #opening-animation.is-skipping #opening-animation__logo { animation: none; transition: opacity 0.2s ease; opacity: 0; } /* 幕が消える */ @keyframes opening-veil-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; pointer-events: none; } } /* * ロゴが浮かび上がる。 * ほんのわずかに大きくなりながら現れることで、 * 明るさだけで出すより、静かに近づいてくる感じになる。 * (TOPページで鯨に重ねているときは、この拡大を外す) */ @keyframes opening-logo-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } /* ロゴが消える */ @keyframes opening-logo-out { from { opacity: 1; } to { opacity: 0; } } /* 「視差効果を減らす」設定への保険。通常はJS側で要素自体を作らないため出番はない */ @media (prefers-reduced-motion: reduce) { #opening-animation, #opening-animation__logo { animation: none !important; opacity: 0 !important; visibility: hidden !important; } }