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

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

しかしhtmlには弱点があります。
それは ***「専門知識が必要になる」*** ということです。
サイトの見栄えをよくしないと誰も来てくれません。
そこでサイトの見栄えをよくするアニメーションなどの作り方が書いてある
「[CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ](https://coliss.com/articles/build-websites/operation/css/awesome-css-techniques-2015-mar.html)」という記事を参考に作っていこうと思います。

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

# 役に立つアニメーション
### delet(削除)

<p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="js,result" data-slug-hash="ZYRgwB" data-user="hakimel" 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/hakimel/pen/ZYRgwB">
  Flipside</a> by Hakim El Hattab (<a href="https://codepen.io/hakimel">@hakimel</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-theme-id="dark" data-default-tab="html,result" data-slug-hash="NPapxy" data-editable="true" data-user="IanLunn" 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/IanLunn/pen/NPapxy">
  CSS Fly-out menu</a> by Ian Lunn (<a href="https://codepen.io/IanLunn">@IanLunn</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-theme-id="dark" data-default-tab="html,result" data-slug-hash="jEmEaP" data-editable="true" data-user="TimLamber" 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/TimLamber/pen/jEmEaP">
  Curtains</a> by @TimLamber (<a href="https://codepen.io/TimLamber">@TimLamber</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-theme-id="dark" data-default-tab="html,result" data-slug-hash="gOKBPK" data-editable="true" data-user="pirrera" 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/pirrera/pen/gOKBPK">
  Transparent Fading Navigation Bar</a> by MrPirrera (<a href="https://codepen.io/pirrera">@pirrera</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-theme-id="dark" data-default-tab="html,result" data-slug-hash="WbzgLR" data-editable="true" data-user="ProfessorSamoff" 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/ProfessorSamoff/pen/WbzgLR">
  Puzzle Piece Human Identifier</a> by Tim Samoff (<a href="https://codepen.io/ProfessorSamoff">@ProfessorSamoff</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

右のやつをホールドしたまま左に移動させます。
サイト読み込み時に位置を変えると効果はかなり高いですね。

![2015031005.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747899/26412c2f-cb2c-2cee-2be0-7c7cceaa4ef3.gif)

気に入った!!

## クリックしたくなってしまう...

### マウスがa要素に当たっているときの効果

<p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="RNZXqx" data-editable="true" data-user="brenden" 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/brenden/pen/RNZXqx">
  Cool CSS3 Link Ideas</a> by Brenden Palmer (<a href="https://codepen.io/brenden">@brenden</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-theme-id="dark" data-default-tab="html,result" data-slug-hash="vErdeB" data-editable="true" data-user="nickcil" 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/nickcil/pen/vErdeB">
  Nature-Themed Buttons</a> by Nick Ciliak (<a href="https://codepen.io/nickcil">@nickcil</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-theme-id="dark" data-default-tab="html,result" data-slug-hash="bNjQLY" data-editable="true" data-user="egrucza" 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/egrucza/pen/bNjQLY">
  &quot;Stupid&quot; Case Study Hover</a> by Eric Grucza (<a href="https://codepen.io/egrucza">@egrucza</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

カーソルをあわせたらタイトルが出てくる演出です。
クリックさせたいときに使うといいかもしれません。