CSS3とjqueryを使ってクリックされた所を起点に波紋アニメーションさせる

-
カテゴリー:
CSS 

5月ですね。
今年はセルインメイではないんですかね(滝汗

今回の記事の内容とは違うのですが、先日、お仕事でCSSを使い波紋を描くようなアニメーションをさせる必要があったので、いろいろと応用できるのではないかと思い、メモ程度にコードなどを残したいと思います。

以下CSSです。

 

念のため、ベンダープリフィックス入れてるんで、かなりコード自体は長く感じてしまうかもしれません。

#circleがアニメーションを適用させるためのボックスとなりborder、border-radiusの設定で赤いラインの入った丸を描きます。
box-shadowはおまけです。

opacityが0になっているのは、アニメーション終了時に非表示の状態にするためです。※他の方法もあるとは思います。

animation-******とついているのがアニメーションに関する設定なのですが、circleという名前のアニメーションを適用するように設定し、あとは、アニメーションさせる回数や速度、イージングの設定などを行っています。

@keyframes circleの中がそのアニメーションの内容で縦横0pxの円が0.8sかけて156pxに大きくなりながら、opacityが1から0に変化していきます。

続いてjqueryの記述です。

上記では、#wrapper内がクリックされた時に処理を行っています。

処理の内容はまずはじめに#wrapperの中に波紋アニメーション用の#circleを挿入し、非表示にしています。

そして、#wrapper内がクリックされたら、クリックされた位置を取得し、#circleのtopとleftにその取得した座標を挿入し、表示させる。
主要なブラウザでは、動作の確認ができたのですが、IEだと比較的新しいバージョンでも動作しないようです。

もっとうまい記述方法もあるとは思いますが、アレンジしていただければと思いますm(。。)m

サンプルはこちら