Blog

SVGを使った面白そうなテキストのアニメーションを再現してみました

nino-eye

東急エージェンシー 2017採用サイト | Tokyu Agency Inc.

↑こちらのサイトで使われていた、SVGを使ったテキストのアニメーションが面白かったので、
自分なりに再現してみました。

↓こちらが再現してみたもの (IE, Edge以外のブラウザで動作します)

DEMO

方法

手順は以下のとおり

  1. IllustratorでSVGを準備する
  2. 作成したSVGをHTMLにインラインSVGとして配置
  3. jQueryとCSS3を使って要素を移動させてアニメーションさせる

 

1. SVGを準備する

ss01 ss02

まずはIllustratorを使って、効果をつけるテキストのSVGを作成します。

今回紹介しているアニメーションに使われているテキストは、正方形を斜めに切った直角三角形でできています。
そのため、この直角三角形を組み合わせることで、目的のテキストを形作っていきます。

できたら、SVG形式で書き出します。

2. 作成したSVGをHTMLにインラインSVGとして配置

書き出したSVGをテキストエディタ等で開き、SVG内の要素をコピーしてHTML内の目的のSVG要素内にペーストします。

 

3. jQueryとCSS3を使って要素を移動させてアニメーションさせる

まずはCSSで目的の要素にtransitionを設定することで、アニメーションの準備をします。
今回のSVGの要素はすべてpolygonなので、以下のように設定しました。
アニメーション中のSVG内の要素がSVGをはみ出しても見切れてしまわないように、
overflowをvisibleに設定するのもポイントです(デフォルトではSVGのoverflowはhiddenになっているため)。

さらに、以下の様なjQueryのコードを設定してアニメーションを実装します。

アニメーションはmouse enterまたはclickのタイミングで起こるようにしました。
アニメーションが開始したら、
SVG内の要素をランダムにCSSのtransformで移動させておき、
1秒経ったら本来の位置に戻すという操作によってアニメーションを実装しています。

アニメーション自体は難しいものではありませんが、
アイディアがすごいと思いました。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ