ホームページの制作にどれだけ役に立つか微妙な感じですが、CSSを利用してソナー効果のアニメーションを作る方法をご紹介します。
英語では、「Ping Effect」とも呼ばれるようで、pingはビシッとかピーンといった効果音を表すと辞書にあります。直訳して「ビシッ効果」だと訳わかんないので、「潜水艦のアクティブ・ソナー音」という意味もあるようなので、勝手にソナーアニメーションとつけてみました。
ソナー効果という表現が正確かどうかはわかりませんが、要するに上手のように「円がだんだん大きくなって消える」の繰り返しのアニメーションです。
まず、HTMLの記述から説明します。
必要なのは、CSSファイルへのリンクと背景用のdiv要素、アニメーション・ソナーを表示するためのspan要素だけです。
次にCSSですが、背景に設定したdiv class="bg"の部分には、背景色と位置や大きさを指定しています。
そして、アニメーションする円のspan class="ping"にも先ほどと同様に背景色と位置や大きさを指定し、さらにanimationプロパティanimation: ping 2s infinite;を設定しています。
左から順にアニメーションの（任意の）名前、再生する時間の長さ、繰り返し を意味しています。
ここでは、アニメーションの中心にpタグで文字を挿入していますが、中央に配置するためにまず、上と左から50％の位置を指定しています。このままだと、文字列の頭の部分が中心に来てしまうので、文字列の大きさ分だけmargin-leftとmargin-topでマイナスにしています。
このページ最初にあった動画を見ると、黄色の背景に緑色の縁を描いているように見えますが、CSS側の実際の動きではclip-pathプロパティを使って、円形に切り抜くという作業をしています。
これを@keyframesで順番に並べて、100％まで来たらopacity: 0;でフェードアウトしています。
CSSの記述は以下の通りです。
ただし、clip-pathプロパティはマイクロソフトのEdgeでは、非対応なのでGoogle ChromeかFireFox、Opera、Safariなどでご覧ください。
