CSSでアニメーションを作成すると、サイトにダイナミックな見せ方を加えることができます。今回は「fallingLine」という名前でアニメーションを実装します。このアニメーションは、線が画面の中央から下方に滑り落ちながらフェードアウトする動きです。
fallingLineの動きの概要
「fallingLine」の動きは以下のフローで実現します。
- 初期は画面の上方に展開されない状態で始まる。
- 画面の中央にラインが出現し、横に薄い線が現れる。
- 下方に滑り落ちて、最後にフェードアウトする。
See the Pen fallingLine by masakazuimai (@masakazuimai) on CodePen.
fallingLineのポイント
1. 擬似要素 (::after) の活用
- 擬似要素を使用することで、HTML構造を無駄に増やさず、デザインのみの要素としてラインを実装しています。
.scroll::afterで独立したラインを作成するため、汎用性が高く、他の要素に影響を与えにくいのが特徴です。
実装例のビジュアルイメージ
fallingLineは下方に滑り落ちていくモーションを発生させるコンテンツです。ラインのフェード効果で動きにメリハリを持たせることができます。これは、モダンデザインやイントロアニメーションに最適な動きです。
おわりに
fallingLineは簡単なCSSで実装可能なアニメーションです。このアニメーションはサイトのデザインを倍増させるだけでなく、視観者の気を引きつける力があります。
あなたのプロジェクトにも是非試してみてください。
よくある質問（FAQ）
Q. CSSだけでローディングアニメーションを作る方法は？
@keyframesとanimationプロパティを使い、要素のopacity・transform・heightなどを時間経過で変化させます。複数の要素にanimation-delayを設定して順番に動かすことで、ウェーブやカスケードのようなローディング表現が可能です。パフォーマンスの観点から、transformとopacityのみをアニメーション対象にするのがベストプラクティスです。
Q. フェードラインアニメーションをスクロールに連動させるには？
Intersection Observer APIを使い、要素がビューポートに入ったタイミングでアニメーション用のCSSクラスを付与します。CSSのanimation-play-stateをpausedに初期設定し、クラス付与時にrunningに切り替える方法が軽量でパフォーマンスも良好です。より高度な制御にはGSAPのScrollTriggerプラグインが適しています。
