テクスチャ抜きマーキーから雪と猫時計へ

Text / Typography

実装ポイント Focus: 導入はレンガ壁の上に斜めのマーキーを重ね、文字色を透明にしたうえで background-clip: text と background-attachment: fixed を使い、流れる文字が壁と同じ柄をくり抜くように見せています。
本編では日付・時刻と、CSSだけで組んだ黒猫のシルエット時計を出し、雪は落下・回転・横揺れを別タイムラインにして「冬の会場に入った」感覚へつなぎます。
しっぽは transform-origin を上端にして振り子にし、針は秒・分・時で周期を分けています。
挑戦 Challenge: 無限マーキーは途切れと速度のズレが出やすいので、コンテンツを二重化し、translateX を 0 ↔ −100% でループさせました。斜め配置で端が欠けるため、ラッパーを 120% 幅にしてカバーしています。
雪は同期して落ちると人工的になるので、出現位置・サイズ・透明度・遅延を個体ごとにばらけさせ、落下とゆらぎを別アニメに分けました。
導入から本編へは GSAP のタイムラインで待ち・フェード・表示を一本化し、オーバーレイは完了後に display: none して操作を妨げないようにしています。
猫は画像に頼らず、時計の針についても各針が秒針なら1秒ごと・分針なら1分ごとに動くように実装しています。
使用技術 Animation: ・HTML5
・SCSS
・GSAP
詳細 Details: #background-clip #GSAP

他の研究記録も見る

透過テキストのワイプ・エフェクト

Velocity（速度）連動テキストと3D空間パレード