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

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

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

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

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

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

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

GIFアニメーション

See the Pen GIFアニメーション by Web Navigator (@web-navigator) on CodePen.

PNGアニメーション（APNG）

See the Pen PNGアニメーション（APNG） by Web Navigator (@web-navigator) on CodePen.

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

See the Pen PNGアニメーション（png画像が1度だけ動く） by Web Navigator (@web-navigator) on CodePen.

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

See the Pen PNGアニメーション（png画像がループして動く） by Web Navigator (@web-navigator) on CodePen.

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

See the Pen PNGアニメーション（hoverするとpng画像が動く） by Web Navigator (@web-navigator) on CodePen.

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

See the Pen JavaScriptと組み合わせて動かすきっかけを設定する方法 by Web Navigator (@web-navigator) on CodePen.

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

See the Pen SVGアニメーション（Vivus.js） by Web Navigator (@web-navigator) on CodePen.

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

See the Pen おまけ：イラストとテキストが複数あるSVGアニメーション by Web Navigator (@web-navigator) on CodePen.

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

See the Pen SVG アニメーションを使い、手書き風アニメーションを実現 by Web Navigator (@web-navigator) on CodePen.

WEBさん

WordPressの不具合をなおす人

TwitterInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。