Help us understand the problem. What is going on with this article?

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

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

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

📝 作ったもの

collapse.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, その他
クラスを追加出来れば何でもOK
Animate.css CSSアニメーションを簡単に
実装出来るライブラリ

 

Animate.css

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

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

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

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

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)

2、クラスを付ける

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

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

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

animete.gif
どんなアニメーションのクラスがあるかは、公式サイトで実際の動きを確認できます。
スピードを変えたりなどのオプションもあります。

公式サイト
 

👆 クリックで落下

hinge.gif

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

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

index.html
<div class="collapse">
  <div class="button">ボタン</div>
</div>
style.css
.collapse {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

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

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

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


サンプル全部見たい人用(クリックで開く)
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>
style.css
.collapse {
    width: 200px; height: 200px;
    background-color: lightblue; }
main.js
$('.button').click(function() {
    $(".collapse").addClass("animate__animated animate__hinge");
})

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

🚧 連続で落下し崩壊

rem0h-tyoak-compressor.gif

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

index.html
<div class="contents">
  <div class="collapse1">
    <div class="button">クリック</div>
  </div>
  <div class="collapse2"></div>
</div>
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
 

💬 まとめ

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

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

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

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);
  }
});

 
画像を変えたり、別のアニメーションを追加するなど色々カスタマイズして、
自分ポートフォリオなどに実装しても面白いかもしれませんね!

(キャラアイコンをクリックし過ぎると怒って崩壊するイースターエッグ)

 

リンク

記事のLGTM:thumbsup:など貰えたらとても励みになります。

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

・ 前回の記事
【GitHub】README.mdをカッコ可愛くデザインしてアプリの魅力を120%にする

aocattleya
LGTM👍やコメント貰えると嬉しいです・v・ 世界中のオタクを幸せにする為の技術を日々学んでいます。
https://aocattleya.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした