アニメーション付きSVGで実装する滑らかで自然なアニメーション

SVGとCSS3でできる筆記体のアニメーションをやってみる

CSSのぼかしフィルターを利用した、フォーカスによる遠近表現

インラインSVGはブラウザの制約等により、管理画面などを除いては、なかなか目にする機会が少ないですが、
インラインSVGによるグラフィックとアニメーションを大胆に使ったサイトが面白かったのでご紹介いたします。
&nbsp;
↓サイトはこちらです↓
「Fontwalk」<a href="http://www.fontwalk.de/" target="_blank">http://www.fontwalk.de/</a>
<a href="http://www.fontwalk.de/" target="_blank"><img decoding="async" loading="lazy" title="Fontwalk" alt="Fontwalk" src="/uploads-archive/2013/10/nino_image01.jpg" width="328" height="224" /></a>
&nbsp;
&nbsp;
まずはこちらのシーン
<img decoding="async" loading="lazy" alt="シーン１" src="/uploads-archive/2013/10/nino_image02.jpg" width="328" height="224" />
変化する図形や背景の情報などが大きな数字によって表示されていて、印象的です。
真ん中の回転する分度器のようなものはSVGならではという印象です。
&nbsp;
<img decoding="async" loading="lazy" alt="シーン2" src="/uploads-archive/2013/10/nino_image03.jpg" width="328" height="224" />
つづいて、車で走っているようなアニメーションです。
画面いっぱいに広がるグラフィックを表示しても軽いのもSVGの魅力ですが、
こちらではその利点が最大限に活かされている印象です。
&nbsp;
<img decoding="async" loading="lazy" alt="シーン3" src="/uploads-archive/2013/10/nino_image04.jpg" width="328" height="223" />
筆記体で文字が書かれていくアニメーションです。
WEB上ではFlashを除いてSVGでなければ、このようなアニメーションを表示できないのではないでしょうか。
&nbsp;
<img decoding="async" loading="lazy" alt="シーン4" src="/uploads-archive/2013/10/nino_image05.jpg" width="328" height="224" />
フォントが徐々に変化するアニメーションです。
パッと見たときは気づきませんでしたが、
とても凝ったアニメーションです。
&nbsp;
画面いっぱいにアニメーションを表示する場合に、
SVGが大きな力を発揮するということを、
今回改めて感じました。

Blogブログ

Articles

Contact Us