イラスト・オブジェクトの動き

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

イラスト・オブジェクトの動き

「イラスト・オブジェクトの動き」は直感的に作成できるジェネレータを使用したGIFアニメ、PNGアニメ、SVGアニメで簡単に表現できます。

GIFアニメーション

PNGアニメーション（APNG）

PNGアニメーション（1度だけ動く）

PNGアニメーション（ループして動く）

PNGアニメーション（hoverすると動く）

JavaScriptと組み合わせて動かすきっかけを設定する方法

SVGアニメーション（Vivus.js）

イラストとテキストが複数あるSVGアニメーション

SVGアニメーションを使い、手書き風アニメーションを実現

以上で「イラスト・オブジェクトの動き」編は終わりです。実装パターンを覚えたら、実践編で実装課題に取り組むのがおすすめです。