6月30日　授業内容（SVGを使ったアニメーション,新しいモバイルフレンドリーテスター）

yachin29.hatenablog.com


Panizzon Embalagens - Frascos e Embalagens Plásticas



①イラストレーターで800 x 300 ピクセルで新規作成。

②好きな文字を記入して、書式→アウトラインを作成する。（※アウトライン化後書体やフォントサイズは変更できない）

③別名保存でsvgでの保存を選択し、以下の設定で保存する。
f:id:paris1204:20160630162001p:plain

④保存したSVG画像をdreamweaverで開くとコードが現れる。
ブラウザ表示すると描いた通りに表示される。
f:id:paris1204:20160630162329p:plain

⑤SVG画像のコードの中のSVGタグの最初から閉じタグまでをコピーして新規index.htmlの中に入れる。
f:id:paris1204:20160630162755p:plain

⑥SVGタグの周りをdivで囲む。スタイルシートで幅、高さ、マージンを設定すると文字の大きさが全画面表示から指定の大きさになる。
f:id:paris1204:20160630163731p:plain


⑦以下を参考にしてスタイルの設定をする。
f:id:paris1204:20160630165608p:plain

f:id:paris1204:20160630165629p:plain

以下はかなり長いのでSVGコードは大体は略しています。パスにクラスをつけて設定していく。
※１つのdivの中には１つしか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画像を使用し、時間差でオレンジが現れるようにしました。
f:id:paris1204:20160701003704p:plain

以下はアップロードURL(※このブログのアップデート時点ではIEは対応していないので、chrome,safari,firefoxなどでご覧ください。)
http://yellow1204.webcrow.jp/upload/svg_img_creation/index.html








新しいモバイルフレンドリーテスター


以下のサイトで作成したサイトのurlを入力すると評価してくれる。
f:id:paris1204:20160630170614p:plain