\目次/
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください!
イラスト・オブジェクトの動き
「イラスト・オブジェクトの動き」は直感的に作成できるジェネレータを使用したGIFアニメ、PNGアニメ、SVGアニメで簡単に表現できます。
GIFアニメーション
See the Pen
GIFアニメーション by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
PNGアニメーション(APNG)
See the Pen
PNGアニメーション(APNG) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
PNGアニメーション(png画像が1度だけ動く)
See the Pen
PNGアニメーション(png画像が1度だけ動く) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
PNGアニメーション(png画像がループして動く)
See the Pen
PNGアニメーション(png画像がループして動く) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
PNGアニメーション(hoverするとpng画像が動く)
See the Pen
PNGアニメーション(hoverするとpng画像が動く) by Web Navigator (@web-navigator)
on CodePen.
png画像にマウスを持っていき表示を確かめてね!↑
JavaScriptと組み合わせて動かすきっかけを設定する方法
See the Pen
JavaScriptと組み合わせて動かすきっかけを設定する方法 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
SVGアニメーション(Vivus.js)
See the Pen
SVGアニメーション(Vivus.js) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
イラストとテキストが複数あるSVGアニメーション
See the Pen
イラストとテキストが複数あるSVGアニメーション by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
SVGアニメーションを使い、手書き風アニメーションを実現
See the Pen
SVG アニメーションを使い、手書き風アニメーションを実現 by Web Navigator (@web-navigator)
on CodePen.
「Rerun」を押してを確かめてね!↑