Tweet about this on TwitterShare on FacebookShare on Google+

お問い合わせ

会社名任意
ご担当者様氏名必須
メールアドレス必須
お問合せ内容必須

個人情報保護方針

BLOG

冬なのでサンタをSVGでアニメーションで書いてみた(NonJS)

シーズンネタを1つ楽しみながら作りました。
今回は『サンタクロース』をSVGをアニメーションさせました。

 

下記の記事を読んでみて面白いそうなので実際に手を動かしてみて、

CSS3とAdobeCCで書いた(フリー素材です)ベクターのSVGを使って動きを加えました。
イラレが吐き出すSVGにクラスを付け加えた程度でJavascriptを使ってませんのでお手軽かと思います。

参考記事:
Illustrator編:第3回「Web制作に役立つ機能強化」
How SVG Line Animation Works
ベクターのオブジェクトをアウトラインでまとめるのが一番時間が掛かり、面倒臭かった作業です。
単純に綺麗でない自分でpathを引いても同じ事ができます。

 

SVGだと画面サイズに左右されずリサイズをしてくれるので劣化が無いところがいいですね。
iOS8とLolipopで見れたのでたぶん色んなデバイスで動くかと思います。ぜひ遊んでみて下さい

blog1

ページの先頭へ