html & css & javascript で かっこいいサイト を 作る[アニメーション]

最近サイトを作りました。
https://caleb7023.hmath.pro/
私のサイトはレンタルサーバーが高いので仕方なくgoogle sitesで作ってあります。
しかし、google sitesは自由度が低すぎるということで最近、
結局レンタルサーバーを借りてhtmlで作ろうと思っています。

しかしhtmlには弱点があります。
それは ***「専門知識が必要になる」*** ということです。
サイトの見栄えをよくしないと誰も来てくれません。
そこでサイトの見栄えをよくするアニメーションなどの作り方が書いてある
[動くwebデザインアイデア帳](https://coco-factory.jp/ugokuweb/)というサイトを参考に作っていこうと思います。

私が気に入ってるサイトです。

では、ここから役に立ちそうな背景のアニメーションを紹介していこうと思います。

# 役に立つ背景のアニメーション
## [幾何学模様](https://coco-factory.jp/ugokuweb/move02/5-4/)

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="PoWzgOO" data-user="ugokuweb" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ugokuweb/pen/PoWzgOO">
  5-4 幾何学模様</a> by 動くWebデザインアイディア帳 (<a href="https://codepen.io/ugokuweb">@ugokuweb</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

科学的な感じです。

javascriptの部分を変えるとふるまいを変えられます。
ふるまいは[サイト](https://vincentgarreau.com/particles.js/)で簡単に決めてコピペできます。

## [波線(1つ)](https://coco-factory.jp/ugokuweb/move02/5-14/)

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="KKaMYZb" data-user="ugokuweb" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ugokuweb/pen/KKaMYZb">
  5-14 波線（1つ）</a> by 動くWebデザインアイディア帳 (<a href="https://codepen.io/ugokuweb">@ugokuweb</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

きれいですね。
これもライブラリを使用しています。

## [粒子が集まってタイポグラフィーを形成する](https://coco-factory.jp/ugokuweb/move02/5-17/)

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="LYxZvQZ" data-user="ugokuweb" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ugokuweb/pen/LYxZvQZ">
  5-17 粒子が集まってタイポグラフィーを形成する</a> by 動くWebデザインアイディア帳 (<a href="https://codepen.io/ugokuweb">@ugokuweb</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

これもライブラリを使用しています。

日本語にも対応しておりオプションもあります。
これもかっこいいです。

## [紙吹雪が舞う](https://coco-factory.jp/ugokuweb/move02/5-8/)

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="rNjLbpX" data-user="ugokuweb" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ugokuweb/pen/rNjLbpX">
  5-8 紙吹雪が舞う</a> by 動くWebデザインアイディア帳 (<a href="https://codepen.io/ugokuweb">@ugokuweb</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

様々な大きさの5角形が降ってきます。
背景に設定してみてもいいかもしれません。

## [SVGアニメーション](https://coco-factory.jp/ugokuweb/move02/9-4-1/)

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="RwKKOdr" data-user="ugokuweb" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ugokuweb/pen/RwKKOdr">
  9-4-1  SVGアニメーション（vivus.js）</a> by 動くWebデザインアイディア帳 (<a href="https://codepen.io/ugokuweb">@ugokuweb</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="vYggMPN" data-user="ugokuweb" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ugokuweb/pen/vYggMPN">
  9-4-2 SVG アニメーションを使い、手書き風アニメーションを実現</a> by 動くWebデザインアイディア帳 (<a href="https://codepen.io/ugokuweb">@ugokuweb</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

タイトルに使えたりします。
1つ目と2つ目で使い分けてください。

svg画像であればたぶん何でもできます。

## [文字がランダムに出現](https://coco-factory.jp/ugokuweb/move02/8-8/)

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="LYxbVRx" data-user="ugokuweb" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ugokuweb/pen/LYxbVRx">
  8-8 ランダムに出現</a> by 動くWebデザインアイディア帳 (<a href="https://codepen.io/ugokuweb">@ugokuweb</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

これもタイトルにいいかもじれません。

# サンプルサイト([coco-factory.jp](coco-factory.jp))

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-1/1-1.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-2/1-2.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-3/1-3.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-4/1-4.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-5/1-5.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-6/1-6.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-7/1-7.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-8/1-8.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-9/1-9.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-10/1-10.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-11/1-11.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-12/1-12.html

https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-13/1-13.html