/*
Melt text — drop-in fade-and-drip animation for body text.
-----------------------------------------------------------------
使い方:
1. を に
2. を読み込み
3. #body 配下の h1〜h6 / p / li / dt / dd の文字が、ページロードから
3秒後に文頭から1文字ずつじんわり溶けて消えていく。
ペース調整 (JS が文字数から自動計算するが、上書きも可能):
--melt-start 全体の開始遅延 (default: 3s。ロゴと揃える)
--melt-stagger 1文字あたりの開始ずらし (default: 0.06s。JSが上書き)
--melt-duration 1文字の溶けきり時間 (default: 3.5s)
*/
:root {
--melt-start: 3s;
--melt-stagger: 0.09s;
--melt-duration: 3.5s;
}
.melt-char {
display: inline-block;
/*
親 の text-decoration (下線) は inline-block の子へ自動伝播しないので、
明示的に継承させる。隣接する .melt-char どうしが線で繋がり、リンクの下線が
通常通り表示される。溶け中は translateY と一緒に下線も垂れる挙動になる。
*/
text-decoration: inherit;
color: inherit;
animation: meltChar var(--melt-duration) cubic-bezier(0.5, 0, 0.7, 0.4) forwards;
animation-delay: calc(var(--i, 0) * var(--melt-stagger) + var(--melt-start));
}
/*
英単語 (連続する非CJK・非空白文字) を束ねる wrapper。
inline-block にすることで、内部にある melt-char の境界で改行されなくなり、
英単語が途中で折り返される問題を防ぐ。CJK 文字 (日本語) は wrapper に
入らないので従来通り文字単位で自由に改行される。
text-decoration / color もリンクから継承させる。
*/
.melt-word {
display: inline-block;
text-decoration: inherit;
color: inherit;
}
/*
本文要素にマウスを合わせると、その内側の溶解アニメーションを一時停止する。
hover が外れると同じ位置から再開する (CSS animation-play-state の標準挙動)。
対象は文字を直接含む leaf 要素 (p / 見出し / li / dt / dd) のみ。
div や section を含めると祖先がほぼ全画面を覆うため、画面内ほぼ全域で
pause がトリガーされてしまうので意図的に外している。
→ 結果: 段落間の余白や section のパディング上ではアニメは止まらず、
実際に文字を含むブロックの矩形に乗ったときだけ pause になる。
*/
:where(p, h1, h2, h3, h4, h5, h6, li, dt, dd):hover .melt-char {
animation-play-state: paused;
}
@keyframes meltChar {
0% {
opacity: 1;
transform: translateY(0) skew(0deg, 0deg);
filter: blur(0);
}
30% {
opacity: 0.92;
transform: translateY(1px);
filter: blur(0.3px);
}
60% {
opacity: 0.55;
transform: translateY(8px) skew(-3deg, 4deg);
filter: blur(1.5px);
}
100% {
opacity: 0;
transform: translateY(36px) skew(8deg, -6deg);
filter: blur(4px);
}
}
/* OS設定で動きを減らす場合は溶かさず静止表示 */
@media (prefers-reduced-motion: reduce) {
.melt-char {
animation: none;
}
}