最近サイトを作りました。
https://caleb7023.hmath.pro/
私のサイトはレンタルサーバーが高いので仕方なくgoogle sitesで作ってあります。
しかし、google sitesは自由度が低すぎるということで最近、
結局レンタルサーバーを借りてhtmlで作ろうと思っています。
しかしhtmlには弱点があります。
それは 「専門知識が必要になる」 ということです。
サイトの見栄えをよくしないと誰も来てくれません。
そこでサイトの見栄えをよくするアニメーションなどの作り方が書いてある
動くwebデザインアイデア帳というサイトを参考に作っていこうと思います。
私が気に入ってるサイトです。
では、ここから役に立ちそうな背景のアニメーションを紹介していこうと思います。
役に立つ背景のアニメーション
幾何学模様
See the Pen 5-4 幾何学模様 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
科学的な感じです。
javascriptの部分を変えるとふるまいを変えられます。
ふるまいはサイトで簡単に決めてコピペできます。
波線(1つ)
See the Pen 5-14 波線（1つ） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
きれいですね。
これもライブラリを使用しています。
粒子が集まってタイポグラフィーを形成する
See the Pen 5-17 粒子が集まってタイポグラフィーを形成する by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
これもライブラリを使用しています。
日本語にも対応しておりオプションもあります。
これもかっこいいです。
紙吹雪が舞う
See the Pen 5-8 紙吹雪が舞う by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
様々な大きさの5角形が降ってきます。
背景に設定してみてもいいかもしれません。
SVGアニメーション
See the Pen 9-4-1 SVGアニメーション（vivus.js） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
See the Pen 9-4-2 SVG アニメーションを使い、手書き風アニメーションを実現 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
タイトルに使えたりします。
1つ目と2つ目で使い分けてください。
svg画像であればたぶん何でもできます。
文字がランダムに出現
See the Pen 8-8 ランダムに出現 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
これもタイトルにいいかもじれません。
サンプルサイト(coco-factory.jp)