Blog

SVGとスクロールによるアニメーションを使ったインパクトのあるサイト

インラインSVGはブラウザの制約等により、管理画面などを除いては、なかなか目にする機会が少ないですが、

インラインSVGによるグラフィックとアニメーションを大胆に使ったサイトが面白かったのでご紹介いたします。

 

↓サイトはこちらです↓

Fontwalkhttp://www.fontwalk.de/

Fontwalk

 

 

まずはこちらのシーン

シーン1

変化する図形や背景の情報などが大きな数字によって表示されていて、印象的です。

真ん中の回転する分度器のようなものはSVGならではという印象です。

 

シーン2

つづいて、車で走っているようなアニメーションです。

画面いっぱいに広がるグラフィックを表示しても軽いのもSVGの魅力ですが、

こちらではその利点が最大限に活かされている印象です。

 

シーン3

筆記体で文字が書かれていくアニメーションです。

WEB上ではFlashを除いてSVGでなければ、このようなアニメーションを表示できないのではないでしょうか。

 

シーン4

フォントが徐々に変化するアニメーションです。

パッと見たときは気づきませんでしたが、

とても凝ったアニメーションです。

 

画面いっぱいにアニメーションを表示する場合に、

SVGが大きな力を発揮するということを、

今回改めて感じました。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ