「Reflection Text Animation（反射するテキストアニメーション）Rippleリップル」は、テキストがまるで水面に映り込んでいるようなスタイリッシュなエフェクトを再現するデザイン手法です。本記事では、CSSとJavaScriptを使用して、初心者でも簡単に実装できる方法を解説します。Webサイトやプレゼンテーションのデザインに動きを加えたい方におすすめです。
Reflection Text Animationとは？
Reflection Text Animationは、テキストの下部に反射されたようなエフェクトを追加するデザインです。以下の場面で役立ちます：
- 高級感のあるウェブデザイン
- 見出しやバナーに動きを加えたいとき
- カスタムアニメーションの学習素材
完成デモ
この記事で解説するコードの完成形はこちらです。
See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.
カスタマイズポイント
- 色の変更:
- 背景色やテキストの色を自由に変更できます。
- アニメーションの調整:
@keyframesを編集して、アニメーションのスピードや透明度を調整。
実際の利用例
- サービス紹介ページのキャッチフレーズ。
- イベント告知の見出しデザイン。
- Webデザイン学習用のデモ作成。
まとめ
Reflection Text Animationは、CSSとJavaScriptを使用することで簡単に実装できます。このエフェクトを利用して、あなたのWebデザインにプロフェッショナルな印象を加えましょう。サンプルコードを元に、ぜひオリジナルのアニメーションを作ってみてください！
よくある質問（FAQ）
Q. リフレクションテキストアニメーションとは何ですか？
テキストの下に鏡面反射のような映り込みを表示し、アニメーションで動きを加えるCSSエフェクトです。-webkit-box-reflectプロパティや擬似要素（::after）でテキストを複製・反転し、グラデーションマスクで徐々に透明にすることで、光沢のある床に映り込んだような効果を表現します。
Q. CSSのbox-reflectプロパティのブラウザ対応状況は？
-webkit-box-reflectはWebKit系ブラウザ（Chrome・Safari・Edge）で対応していますが、Firefoxでは非対応です。クロスブラウザ対応が必要な場合は、擬似要素でテキストを複製しtransform: scaleY(-1)で反転させ、mask-imageでグラデーションフェードを適用する代替手法を使ってください。
