[css] エレメントが結合するアニメの作成

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

モーフィングアニメって、映画などのCGでよく見る手法ですが、CSSでもsvgを使って再現する事が可能です。
 

HTML コンテンツへ SVG 効果を適用する
 

SVG効果というのを使うと色々なフィルター効果を演出でき、WEBページにおける表現を格段にましてくれます。
 

さらにそれを応用すると、水滴同士がくっつくようなアニメをブラウザレンダリングで表現する事が可能です。
 

単純にエレメントを結合する場合と比べて、色々な効果ができそうです。

サンプル

ソースコード

このSVG効果はJSを一切使わずに実行できるので、ネットワーク通信に置いて非常に帯域負荷の少ない方法です。

ちなみに、Codepenのリンクも載せておきます。
 

css-bond | Codepen

応用アイデア

ページローディングや、ホームページの効果的な演出などに使えますね。
 

実際にこの効果を見たのが、とあるWEBサイトの読み込み画面だったので、非常にアイデア次第で、視覚効果が得られるとてもいい機能であると理解できました。
 

自分用の効果ライブラリを作っておくと仕事で使う時に便利に使えますよね。
 

ちなみに、ブラウザの対応状況ですが、「98.12%」の網羅性との事です。
 

Inline SVG in HTML5
 

スクリーンショット 2018-03-31 9.40.04
 

IEは・・・orz

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です