CSS

アニメーションするソナー効果をCSSで作る方法

ホームページの制作にどれだけ役に立つか微妙な感じですが、CSSを利用してソナー効果のアニメーションを作る方法をご紹介します。

アニメーション・ソナー

英語では、「Ping Effect」とも呼ばれるようで、pingはビシッとかピーンといった効果音を表すと辞書にあります。直訳して「ビシッ効果」だと訳わかんないので、「潜水艦のアクティブ・ソナー音」という意味もあるようなので、勝手にソナーアニメーションとつけてみました。

ソナー効果という表現が正確かどうかはわかりませんが、要するに上手のように「円がだんだん大きくなって消える」の繰り返しのアニメーションです。

まず、HTMLの記述から説明します。

必要なのは、CSSファイルへのリンクと背景用のdiv要素、アニメーション・ソナーを表示するためのspan要素だけです。

次にCSSですが、背景に設定したdiv class="bg"の部分には、背景色と位置や大きさを指定しています。

そして、アニメーションする円のspan class="ping"にも先ほどと同様に背景色と位置や大きさを指定し、さらにanimationプロパティanimation: ping 2s infinite;を設定しています。

左から順にアニメーションの(任意の)名前、再生する時間の長さ、繰り返し を意味しています。

ここでは、アニメーションの中心にpタグで文字を挿入していますが、中央に配置するためにまず、上と左から50%の位置を指定しています。このままだと、文字列の頭の部分が中心に来てしまうので、文字列の大きさ分だけmargin-leftmargin-topでマイナスにしています。

このページ最初にあった動画を見ると、黄色の背景に緑色の縁を描いているように見えますが、CSS側の実際の動きではclip-pathプロパティを使って、円形に切り抜くという作業をしています。

これを@keyframesで順番に並べて、100%まで来たらopacity: 0;でフェードアウトしています。

CSSの記述は以下の通りです。

デモページはこちらです。

ただし、clip-pathプロパティはマイクロソフトのEdgeでは、非対応なのでGoogle ChromeかFireFox、Opera、Safariなどでご覧ください。

Related posts

CSSでまるでタイピングしているように文字を表示する方法

ItSpaceBiz

CSSでスライドして比較できるビフォー・アフター写真を作る

ItSpaceBiz

アニメーションする円グラフをCSSで作るには

ItSpaceBiz