CSSアニメーションとJSで『崩壊するサイト』を簡単に作る


今回はサイトに崩壊するイースターエッグ（隠し要素）みたいな物を、基本的なコードのみで実装してみたので方法をまとめます。
なので初学者の方でも比較的分かりやすいかと思います。

インフラエンジニア「もっと手軽に崩壊できる。」
CSS職人「こんな崩壊にしてみました。」
やらかしエンジニア「崩壊しました。」
な話がある場合はぜひ教えてください！（自分は最近やらかしました。）
　

# 📝 作ったもの

![collapse.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/d4a9e92d-f919-0780-f5b0-e740a6816f91.gif)
（↑サンプルページのGif動画）


**■ サンプルサイトURL（PCのみ）
https://aocattleya.github.io/Collapse-Site**

**■ GitHub
https://github.com/aocattleya/Collapse-Site**

サイト内のキャラクターアイコンをクリックすると、**サイトが崩壊**します。

今回は解説がしやすいのでjQueryで解説します。
アイデア重視で実際やってることは簡単なので、Vue.jsなどでも簡単に応用出来ます。
　
## 簡単な仕組み解説

クリックした場合にフェードアウトするアニメーションのクラスを追加する。

もっと簡単にいうと、**クリックでクラスを追加**する。 

| 使用している物 | 説明 |
| :--: | :--: |
|HTML, CSS| --- |
|javaScript|jQuery, Vue.js, その他<br>クラスを追加出来れば何でもOK|
|Animate.css|CSSアニメーションを簡単に<br>実装出来るライブラリ|
　
## Animate.css

もちろん自分でアニメーションを作っても良いですが、難しいアニメーションなんて作れない！という方に、フェードインや跳ねたりのアニメーションをクラスを付けるだけで簡単に実装出来るライブラリがあります。

・Animate.css（公式サイト）
https://daneden.github.io/animate.css

簡単に使い方の紹介です。

**１、ライブラリを読み込む**
ダウンロードして読み込みも出来ますが、CDN（ヘッダーにURL置くだけ）でも使用出来ます。

```html:index.html
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
</head>
```

CDNのバージョンによってクラス名が違ったりするので公式のREADMEにて
npmなど他の方法でインストールしたい場合なども書かれています。
→　[animate.css（GitHub）](https://github.com/daneden/animate.css)<br><br>

**２、クラスを付ける**

アニメーションを使用したいクラスに、**`animate__animated`**と**`アニメーションのクラス`**を付与

```html:index.html
<div class="animate__animated animate__fadeInUp">フェードインするよ</div>
```

これでページを読み込んだ時に、すでに反映されています。簡単！

![animete.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/217f8d4a-0665-c6fb-49d1-3a0f2be649de.gif)
どんなアニメーションのクラスがあるかは、公式サイトで実際の動きを確認できます。
スピードを変えたりなどのオプションもあります。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/0c085d40-9818-c8ef-388b-c599e991b115.png">
→ [公式サイト](https://daneden.github.io/animate.css)
　
# 👆 クリックで落下

![hinge.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/08ee9ef2-60e4-b0ce-01fa-d205c2d459b6.gif)

Animate.cssで簡単にアニメーションが実装出来る事が分かったところで、
次に、要素をクリックしてアニメーションのクラスを追加し、**フェードアウト**させます。

何でもOKですが、今回はjQueryでクラス追加してみます。

```html:index.html
<div class="collapse">
  <div class="button">ボタン</div>
</div>
```

```css:style.css
.collapse {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}
```

**`button`**クラスをクリックすると、
**`collapse`**クラスに**`animate__animated animate__hinge`**の2つのクラスを追加する。

※**`hinge`**は、animete.cssの中のポロッと落下するアニメーションの1つです。

```javascript:main.js
// クリックでクラス追加
$('.button').click(function() {
  $(".collapse").addClass("animate__animated animate__hinge");
})
```

<details>
<summary>サンプル全部見たい人用（クリックで開く）</summary><div>

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
    <title>クリックで崩壊</title>
  </head>
  <body>
    <div class="collapse">
      <div class="button">クリック</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>
```

```css:style.css
.collapse {
    width: 200px; height: 200px;
    background-color: lightblue; }
```

```javascript:main.js
$('.button').click(function() {
    $(".collapse").addClass("animate__animated animate__hinge");
})
```

</div></details>

基本はこれだけです。
あとはアニメーションを要素に追加するタイミングを変えて全体が崩壊していくように見せます。
　
# 🚧 連続で落下し崩壊

![rem0h-tyoak-compressor.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/db6e3961-a690-0dfc-adf3-5b5ca6331f3d.gif)

ボタンクリック後に2つ目を一定時間後に実行させます。
一定時間後に特定の処理を行うには`setTimeout()`を使います。

```html:index.html
<div class="contents">
  <div class="collapse1">
    <div class="button">クリック</div>
  </div>
  <div class="collapse2"></div>
</div>
```

```js:main.js
$(".button").click(function () {
  // 1つ目に追加
  $(".collapse1").addClass("animate__animated animate__hinge");
  // 2つ目に追加（1秒後）
  setTimeout(function () {
    $(".collapse2").addClass("animate__animated animate__hinge");
  }, 1000);
});
```

　
今回はシンプルにこんな形で、あとはアニメーションをさせたい要素に好きなタイミングで付けていくと崩壊するサイトが完成です！
![collapse.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/d4a9e92d-f919-0780-f5b0-e740a6816f91.gif)
　
## 💬 まとめ

大きい要素を一気に動かすほど重くなるので、やりすぎは注意してください。

やっていること自体はとても簡単な物ですが、アイデア次第でとても面白い事が出来ますね！エイプリールフールネタなどに使ってみたりも面白いと思います。

他にも少し応用して、5回クリック後に崩壊させてみたり

```js:main.js
let count = 0;
$(".button").click(function () {
  count += 1;
  // クリックでcountが5回になったら
  if (count === 5) {
    $(".collapse1").addClass("animate__animated animate__hinge");
    setTimeout(function () {
      $(".collapse2").addClass("animate__animated animate__hinge");
    }, 1000);
  }
});
```
　
画像を変えたり、別のアニメーションを追加するなど色々カスタマイズして、
自分ポートフォリオなどに実装しても面白いかもしれませんね！
<img width="550" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/3e50cf36-b69f-702b-94f1-43c6647964f3.gif">
（キャラアイコンをクリックし過ぎると怒って崩壊するイースターエッグ）

　

## リンク
記事のLGTM:+1:など貰えたらとても励みになります。

:octocat: GitHub
https://github.com/aocattleya
🐦 Twitter
https://twitter.com/aocattleya
📗 Qiita
https://qiita.com/aocattleya

📄 　**書いた過去記事**
・[【GitHub】README.mdをカッコ可愛くデザインしてアプリの魅力を120%にする](https://qiita.com/aocattleya/items/5f836e9c65ba3eb3af03)
・ [Vue.jsとCSSアニメーションでラーメンタイマーを作る + Firebaseで簡単公開](https://qiita.com/aocattleya/items/3faa42b5d27a0f608785)

<a href="https://hrmos.co/pages/vivion/jobs?"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/452a6198-5ce1-0f65-a81d-93a58e6bd07f.png" width="300px"/></a>