みなさん、お疲れ様です。
今回はSVGアニメーションに挑戦しました。→DEMO
存在自体は知ってたのですが、使いどころがわからずほったらかしになっていました。
で、なんとなく上のDEMOを作っていたら、知人が「サイトの初めに出したら面白そう」と言ってくれたので、それをヒントに実装しました。もしよければ後でポートフォリオサイトのほうに行ってみてください。ページ上部のロゴからリンクしてます。
では、使い方です。
今回はこちらのサイトを参考にさせていただきました。サイトが詳しいのでここでは簡単に説明させていただきます。
http://ascii.jp/elem/000/000/901/901319/
①まず、Illustratorでイラストを描きます。アンカーポイントは少ないほうがよさそうです。
②イラストをsvg形式で保存します。このときレイヤーの名前は半角英数にしておきましょう。
③svgの画像をDreamweaverなどのテキストエディタで開きます。すると以下のようなコードが出ます（見えないと思いますが、雰囲気だけ）。
④このコードの<svg>～</svg>をコピーしてHTMLの埋め込みたいところにペーストします。このときブロック要素で囲んでおいて、その要素の幅で画像の大きさを操作します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="svgImg"> | |
| <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" | |
| y="0px" viewBox="-460.1 263.8 38 34.3" style="enable-background:new -460.1 263.8 38 34.3;" xml:space="preserve"> | |
| <g id="XMLID_479_"> | |
| <path id="y" class="st0" d="M-436.5,276.4c0,0,1.1-0.8,1.1-0.8c1.3-0.9,2.2-1.4,2.7-1.7c0.7-0.4,1.2-0.3,1.5,0.2 | |
| c1,1.3,1.9,3.1,2.6,5.3c0.7,2.2,1.1,4.3,1.1,6.4c0,0.3,0,0.6,0,1c0,0.1,0,0.1,0.1,0c1.9-3.5,2.9-6.4,2.9-8.6c0-0.4-0.1-1-0.3-1.8 | |
| c-1.7-4.5,1.6-3.4,2.2-1c0,1.5-0.3,3.4-1,5.7c-0.7,2.3-1.8,4.7-3.3,7.3c-1.5,2.6-2.8,4.5-4.1,5.8c-1.3,1.3-2.4,2.2-3.6,2.7 | |
| c-1.2,0.5-2.2,0.8-3.2,0.8c-2.4,0.1-2.3-3.1,1-2.5c0.7,0.2,1.2,0.2,1.5,0.2c0.7,0,1.5-0.3,2.3-0.9c1.1-0.8,2-1.8,2.6-2.9 | |
| s1-2.3,1-3.4c0-1.6-0.2-3.6-0.7-5.9c-0.5-2.3-1.1-4-2-5.2c-0.4-0.6-0.9-0.8-1.4-0.9c-0.6-0.1-2,0.6-2.3,0.8 | |
| C-436.4,277.3-436.9,276.7-436.5,276.4z"/> | |
| <path id="n" class="st0" d="M-444.6,266.9c0.5,1.8,0.9,3.5,1.4,4.9c0.5,1.4,1.6,4.6,3.3,9.6c0.1,0.2,0.1,0.2,0.1,0 | |
| c0.2-0.7,0.5-2.1,1.1-4.1c0.7-2.9,1.1-4.7,1.4-5.4c0.7-2.2,1.3-3.8,1.9-4.8c0.9-1.6,2.1-2.9,4.5-2.9c0.8,0,1.3,0.1,1.7,0.4 | |
| c2,1.8,0.3,2.8-3,1.5c-0.6,0-1.1,0.2-1.5,0.6c-0.7,0.7-1.5,2.4-2.4,5.1c-0.9,2.7-2,7.1-3.3,13.1c0,0-0.5,2.2-0.5,2.3 | |
| c0,0.1-0.1,0.2-0.2,0c-1.2-2.7-2.1-4.7-2.6-6c-0.6-1.7-1.4-3.7-2.2-6.3c0,0-1.8-5.8-1.9-5.9c0-0.1,0-0.2-0.1,0 | |
| c-0.3,2-2.8,11.8-3.1,12.7c-0.5,1.6-1.1,2.8-1.7,3.6c-0.7,1.4-3,2.4-4.4,2.4c-1.1,0-2-0.2-2.7-0.7c-1.8-1.4-0.2-2.5,1.4-1.7 | |
| c1,0.6,1.4,0.9,2.1,0.9c0.7,0,1.3-0.3,2-0.9c1-0.9,1.9-2.8,2.8-5.7c1.1-3.5,2.1-7.5,3.1-12.8c0-0.1,0-0.2-0.1-0.2 | |
| c-0.4,0-1.2,0.1-2.3,0.3c-1.6,0.4-4.3,1.5-4.9,2.5c-0.8,1.2-0.7,3.1,0,4.2c1.7,2.6-2.2,2.5-2.3-0.8c0-1.6,0.4-2.9,1.2-4 | |
| c0.8-1.1,1.8-1.9,3.2-2.5c0.8-0.4,2.5-0.7,4.9-1C-445.1,265.1-445.1,265.1-444.6,266.9z"/> | |
| </g> | |
| </svg> | |
| </div> |
by
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .svgImg{ | |
| width: 500px; | |
| margin: 0 auto; | |
| } | |
| .st0{ | |
| stroke:#092951; | |
| fill: #fff; | |
| stroke-width:0.1; | |
| stroke-dasharray:2000; | |
| stroke-dashoffset:2000; | |
| animation:DASH 4s linear 0s forwards,COLOR 4s linear 0s forwards; | |
| } | |
| #y{ | |
| animation:DASH 4s linear 2s forwards,COLOR 4s linear 0s forwards; | |
| } | |
| @keyframes COLOR{ | |
| 0%{ | |
| fill: #fff; | |
| } | |
| 80%{ | |
| fill:#fff; | |
| } | |
| 100%{ | |
| fill: #092951; | |
| } | |
| } | |
| @keyframes DASH{ | |
| 0%{ | |
| stroke-dashoffset: 2000; | |
| } | |
| 80%{ | |
| stroke-dashoffset:1700; | |
| } | |
| 100%{ | |
| stroke-dashoffset: 0; | |
| } | |
| } |
一応以上で完成です。まだやり始めでわかってないこともたくさんあるので、またいろいろ試してみて載せたいと思います。