今回はサイトに崩壊するイースターエッグ（隠し要素）みたいな物を、基本的なコードのみで実装してみたので方法をまとめます。
なので初学者の方でも比較的分かりやすいかと思います。
インフラエンジニア「もっと手軽に崩壊できる。」
CSS職人「こんな崩壊にしてみました。」
やらかしエンジニア「崩壊しました。」
な話がある場合はぜひ教えてください！（自分は最近やらかしました。）
📝 作ったもの
（↑サンプルページの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, その他 クラスを追加出来れば何でもOK |
| Animate.css | CSSアニメーションを簡単に 実装出来るライブラリ |
Animate.css
もちろん自分でアニメーションを作っても良いですが、難しいアニメーションなんて作れない！という方に、フェードインや跳ねたりのアニメーションをクラスを付けるだけで簡単に実装出来るライブラリがあります。
・Animate.css（公式サイト）
https://daneden.github.io/animate.css
簡単に使い方の紹介です。
１、ライブラリを読み込む
ダウンロードして読み込みも出来ますが、CDN（ヘッダーにURL置くだけ）でも使用出来ます。
<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）
２、クラスを付ける
アニメーションを使用したいクラスに、**animate__animatedとアニメーションのクラス**を付与
<div class="animate__animated animate__fadeInUp">フェードインするよ</div>
これでページを読み込んだ時に、すでに反映されています。簡単！
どんなアニメーションのクラスがあるかは、公式サイトで実際の動きを確認できます。
スピードを変えたりなどのオプションもあります。
→ 公式サイト
👆 クリックで落下
Animate.cssで簡単にアニメーションが実装出来る事が分かったところで、
次に、要素をクリックしてアニメーションのクラスを追加し、フェードアウトさせます。
何でもOKですが、今回はjQueryでクラス追加してみます。
<div class="collapse">
<div class="button">ボタン</div>
</div>
.collapse {
width: 200px;
height: 200px;
background-color: lightblue;
}
**button**クラスをクリックすると、
**collapseクラスにanimate__animated animate__hinge**の2つのクラスを追加する。
※**hinge**は、animete.cssの中のポロッと落下するアニメーションの1つです。
// クリックでクラス追加
$('.button').click(function() {
$(".collapse").addClass("animate__animated animate__hinge");
})
サンプル全部見たい人用（クリックで開く）
<!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>
.collapse {
width: 200px; height: 200px;
background-color: lightblue; }
$('.button').click(function() {
$(".collapse").addClass("animate__animated animate__hinge");
})
基本はこれだけです。
あとはアニメーションを要素に追加するタイミングを変えて全体が崩壊していくように見せます。
🚧 連続で落下し崩壊
ボタンクリック後に2つ目を一定時間後に実行させます。
一定時間後に特定の処理を行うにはsetTimeout()を使います。
<div class="contents">
<div class="collapse1">
<div class="button">クリック</div>
</div>
<div class="collapse2"></div>
</div>
$(".button").click(function () {
// 1つ目に追加
$(".collapse1").addClass("animate__animated animate__hinge");
// 2つ目に追加（1秒後）
setTimeout(function () {
$(".collapse2").addClass("animate__animated animate__hinge");
}, 1000);
});
今回はシンプルにこんな形で、あとはアニメーションをさせたい要素に好きなタイミングで付けていくと崩壊するサイトが完成です！
💬 まとめ
大きい要素を一気に動かすほど重くなるので、やりすぎは注意してください。
やっていること自体はとても簡単な物ですが、アイデア次第でとても面白い事が出来ますね！エイプリールフールネタなどに使ってみたりも面白いと思います。
他にも少し応用して、5回クリック後に崩壊させてみたり
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);
}
});
画像を変えたり、別のアニメーションを追加するなど色々カスタマイズして、
自分ポートフォリオなどに実装しても面白いかもしれませんね！
（キャラアイコンをクリックし過ぎると怒って崩壊するイースターエッグ）
リンク
記事のLGTM
など貰えたらとても励みになります。
GitHub
https://github.com/aocattleya
🐦 Twitter
https://twitter.com/aocattleya
📗 Qiita
https://qiita.com/aocattleya
📄 書いた過去記事
・【GitHub】README.mdをカッコ可愛くデザインしてアプリの魅力を120%にする
・ Vue.jsとCSSアニメーションでラーメンタイマーを作る + Firebaseで簡単公開
