こんにちは、ひらのです（・ω・）ﾉ
私ごとですが、2月でSyngram3年目に突入しました。
あっという間の2年間、そしてこの1年も早いんだろうな…
つまるところ、私がHTMLやCSSをコーディングするお仕事をはじめて、
丸2年がたちました。
そんな平野に新たな壁が立ちはだかるっ!!!
それは…
アニメーション
最近お仕事でちょいちょいアニメーションをアクセントに使うことが多くなってきました。
（流行ってるのかな…
webページでのアニメーションはさまざまな方法で実現可能ですが、
とっつきやすいのは下記を使用したものかと思います。
（単に自分が使用したことがあるだけですが…v
jQueryやCSSのアニメーションはとにかく記述が楽です。
多くの参考サイトもありますし、色指定や大きさをチョイチョイと書くと
グローバルメニューに動きを加えたり、
スライドショーなんかを作ることができます。
こちらは昔に面白がって作成したパララックスサイト。
スクロール量によってイカや背景がアニメーションします。（jQuery）
こちらのイカのドット絵は下記のサイトからお借りしました。
http://park2.wakwak.com/~kuribo/dot/dot1.htm
しかし、jQueryやCSSのアニメーションは多用したり、
繰り返し描写すると重いです。
動作がカクカクします。
そこで、ヌルヌル動かしたい時にはコチラ。
jQueryなどのアニメーションに比べると、座標などの記入も必要なため
ちょっとめんどくさい…。
でもヌルヌルです。
複数の要素をバラバラに動かしたり、繰り返し処理するループなども比較的スムーズです。
（それでも処理が重くなってしまうものもあります…
こちらはSVGで作成したアニメーション。
ピンクやイエローのラインが、濃いグレーのラインの上を走ります。
SVGはパスの座標を指定する記述がややこしいです。(ｼ;ﾟДﾟ)ｼ
複雑なパスを再現する場合などは Illustrator などで
パスの値を書き出して使用するのがオススメです。
canvasはjavascriptのコードで記述できるのが嬉しい。
現在の最新ブラウザではほとんど見ることができるかと思いますが、
IE8よりも古いブラウザなどでは見えない事もあるのが注意です。
（flashを使用するという手もありますが、私はflashが使えない…。）
そんなこんなで、
私は現在、canvasと格闘中…（)´д`(）ｶﾞﾝﾊﾞﾙﾝﾊﾞ
以上、F-15戦闘機大好き。
ひらのでした!!