SVGを使った面白そうなテキストのアニメーションを再現してみました
東急エージェンシー 2017採用サイト | Tokyu Agency Inc.
↑こちらのサイトで使われていた、SVGを使ったテキストのアニメーションが面白かったので、
自分なりに再現してみました。
↓こちらが再現してみたもの (IE, Edge以外のブラウザで動作します)
方法
手順は以下のとおり
- IllustratorでSVGを準備する
- 作成したSVGをHTMLにインラインSVGとして配置
- jQueryとCSS3を使って要素を移動させてアニメーションさせる
1. SVGを準備する
まずはIllustratorを使って、効果をつけるテキストのSVGを作成します。
今回紹介しているアニメーションに使われているテキストは、正方形を斜めに切った直角三角形でできています。
そのため、この直角三角形を組み合わせることで、目的のテキストを形作っていきます。
できたら、SVG形式で書き出します。
2. 作成したSVGをHTMLにインラインSVGとして配置
書き出したSVGをテキストエディタ等で開き、SVG内の要素をコピーしてHTML内の目的のSVG要素内にペーストします。
|
1 2 3 4 5 6 7 | <div> <svg id="svgText" viewBox="0 0 320 160"> <polygon points="45,63 38,56 45,56 "/> <polygon points="45,63 38,63 38,56 "/> ・・・ </svg> </div> |
3. jQueryとCSS3を使って要素を移動させてアニメーションさせる
まずはCSSで目的の要素にtransitionを設定することで、アニメーションの準備をします。
今回のSVGの要素はすべてpolygonなので、以下のように設定しました。
アニメーション中のSVG内の要素がSVGをはみ出しても見切れてしまわないように、
overflowをvisibleに設定するのもポイントです(デフォルトではSVGのoverflowはhiddenになっているため)。
|
1 2 3 4 5 6 7 8 9 | svg { max-width: 100%; overflow: visible; } svg polygon { -webkit-transition: 0.4s; -ms-transition: 0.4s; transition: 0.4s; } |
さらに、以下の様なjQueryのコードを設定してアニメーションを実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(function() { var $targetSvgElm = $("#svgText"); //SVG要素を取得 //SVGにマウスを合わせるか、クリックしたらアニメーションを実行 $targetSvgElm.on("mouseenter click", function() { svgAnimation(); }); function svgAnimation() { //SVG内のpolygonそれぞれを実行 $targetSvgElm.find("polygon").each(function() { //X方向とY方向の移動位置をランダムに決定し、CSSのtransformで設定 var xPosition = Math.random() * (100 - (-100)) + (-100), yPosition = Math.random() * (100 - (-100)) + (-100); $(this).css("transform", "translate(" + xPosition + "px, " + yPosition + "px)"); }); //1秒経ったらSVGのpolygonを本来の位置に戻す var $timer = setTimeout(function() { $targetSvgElm.find("polygon").css("transform", "translate(0, 0)"); clearTimeout($timer); }, 1000); } }); |
アニメーションはmouse enterまたはclickのタイミングで起こるようにしました。
アニメーションが開始したら、
SVG内の要素をランダムにCSSのtransformで移動させておき、
１秒経ったら本来の位置に戻すという操作によってアニメーションを実装しています。
アニメーション自体は難しいものではありませんが、
アイディアがすごいと思いました。
Author Profile
SHARE
