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

https://qiita.com/caleb7023/items/bfa2b365d675616196a3

前回この記事が私にとって絶好だったので2弾目を作りました。
是非、LGTMお願いします。

---

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

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

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

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

# 役に立つ背景のアニメーション
### [スクロールするとヘッダー背景画像が拡大](https://coco-factory.jp/ugokuweb/move02/6-7/)

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="RwKGrBg" 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/RwKGrBg">
  6-7 スクロールするとヘッダー背景画像が拡大</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/move01/4-1-2/)

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="GRjrzgx" 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/GRjrzgx">
  4-1-2プログレスバー＋数字カウントアップ</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 つ 重なりあり）](https://coco-factory.jp/ugokuweb/move02/5-11/)

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="WNRxWdg" 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/WNRxWdg">
  5-11 波打つ（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-7/)

<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="ZELOZvN" 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/ZELOZvN">
  5-7 ホタルが舞う</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