6月30日 授業内容(SVGを使ったアニメーション,新しいモバイルフレンドリーテスター)
Panizzon Embalagens - Frascos e Embalagens Plásticas
①イラストレーターで800 x 300 ピクセルで新規作成。
②好きな文字を記入して、書式→アウトラインを作成する。(※アウトライン化後書体やフォントサイズは変更できない)
③別名保存でsvgでの保存を選択し、以下の設定で保存する。
④保存したSVG画像をdreamweaverで開くとコードが現れる。
ブラウザ表示すると描いた通りに表示される。
⑤SVG画像のコードの中のSVGタグの最初から閉じタグまでをコピーして新規index.htmlの中に入れる。
⑥SVGタグの周りをdivで囲む。スタイルシートで幅、高さ、マージンを設定すると文字の大きさが全画面表示から指定の大きさになる。
⑦以下を参考にしてスタイルの設定をする。
以下はかなり長いのでSVGコードは大体は略しています。パスにクラスをつけて設定していく。
※1つのdivの中には1つしかsvgデータを入れてはいけない。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SVGを使ったアニメーション</title> <style> .box{width:800px; height:300px; margin:100px auto 0; } path.line{ stroke:black;/*線の色*/ stroke-width:1;/*枠線の太さ*/ fill:#fff;/*塗りの色(bodyの背景色を指定する)*/ stroke-dasharray:3000;/*破線の間隔*/ stroke-dashoffset:3000;/*破線の開始位置*/ animation:DASH 3s ease-in-out 1s forwards;/*アニメーションネーム アニメーションの長さ 動き 次のアニメーションが始まるまでの長さ animation-fill-mode(最後の見え方の設定*/ } @keyframes DASH{ 0% {stroke-dashoffset:3000; fill:rgba(20,0,0,0.8); } 50% {stroke-dashoffset:0;/*0〜95%で線が出る*/ fill:rgba(70,0,0,0.8);; stroke-width:1.5; stroke:rgba(255,69,0,0.8);} 95% {stroke-dashoffset:0;/*0〜95%で線が出る*/ fill:rgba(200,0,0,0.7); stroke-width:2; stroke:rgba(0,0,0,0.8);} 100% {stroke-dashoffset:0;/*95%〜100%で塗りが出る。*/ fill:rgba(170,20,0,0.6); stroke-width:1.5; stroke:black; } } .orange{width:500px; height:300px; position:absolute; left:25%; top:40%; opacity:0; animation:ORANGE 3s ease-in-out 1s forwards;} @keyframes ORANGE{ 0% {opacity:0; } 90% {opacity:0.8; } 100% {opacity:1.0; } } </style> </head> <body> <div class="box"> <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="0 0 800 300" style="enable-background:new 0 0 800 300;" xml:space="preserve"> <g> <path class="line" 中略 </g> </svg> </div> </body> </html>
作成したSVG文字と自身でイラストレーターで作成したオレンジのSVG画像を使用し、時間差でオレンジが現れるようにしました。
以下はアップロードURL(※このブログのアップデート時点ではIEは対応していないので、chrome,safari,firefoxなどでご覧ください。)
http://yellow1204.webcrow.jp/upload/svg_img_creation/index.html
以下のサイトで作成したサイトのurlを入力すると評価してくれる。