ITエンジニア/デザイナ向けにオープンソースを毎日紹介

SVGコンテンツの面白いところとして、Flashのようなアニメーションもサポートしていると言うことです。コンテンツを徐々に描いていくようにすれば良いだけなのですが、手作業で実現するのは無理があるでしょう。

そこで使ってみたいのがYarrowです。HTMLのプレゼンなどと組み合わせると効果的かも知れません。

Yarrowの使い方

実際に動いているところです。後から線が引かれるのが分かります。

線の上に文字を載せることもできます。

ソースになるところから線が飛び出ると言った演出も。

セクションのボックスに向かって伸びていくアニメーション。

グラフのポイントへ向かって引かれるデモ。これはインパクトがありそうです。D3と組み合わせています。

グラフが画像で単に矢印が描かれているだけでは目を引けないかも知れません。そこでアニメーションすることで注目を集められるようになります。特にSVGコンテンツは画像と異なりインタラクティブな動きができますのでYarrowを使うことでよりインパクトあるコンテンツになるでしょう。

YarrowはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Yarrow — svg animated arrow pointer and tooltip

krispo/yarrow: svg animated arrow pointer and tooltip

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2