学んだこと

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

イラスト・オブジェクトの動き
WEB先案内
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.

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