【jQueryで超簡単！】ページ読み込み後に画面右下に要素をふわっと表示させる方法

こんにちは！さこちゃんです。
今回はコーディング初心者でもわかるように、

Webサイトを開いたときに、
画面の右下に要素をふわっと表示させる方法 を紹介します！

専門的な知識がなくても、HTML・CSS・jQueryを少し使うだけで、
こんなことができるようになります。

ページ読み込み後に要素を自動表示させる方法がわかる！
固定表示のためのCSSが学べる！
jQueryを使った簡単な実装方法がわかる！

【目次】

デモ紹介
動きを実現する仕組み
HTMLの準備
自作のCSSファイル内にアニメーション用のCSSを書く
jQueryで動きのきっかけを指定する
おわりに

デモ紹介

今回のデモはこちら。
ページ読み込み後、画面の右下から要素がふわっと表示されます。

動きを実現する仕組み

「動きをつけたい要素」に「動くきっかけの起点となるclass名」を付け、ページを読み込んだらjQueryでアニメーション用のCSSのclass名が付与される という指定を行い動きを実現します。

完成までの手順を並べるとこんな感じです。

1.　動きをつけたい要素に動くきっかけの起点となるclass名をつける
2.　自作のCSSファイル内にアニメーション用のCSSを書く
3.　jQueryで動きのきっかけを指定する

それではさっそく実装していきましょう〜〜〜

HTMLの準備

STEP1　動きをつけたい要素に、動くきっかけの起点となるclass名を付与する

今回は「btn.png」に「p-btn」と「fade-up」というclass名をつけたいので、こんな感じになります。
↓

<div class="p-btn fade-up"><img src="./assets/img/btn.png" alt="click me!"></div>

注意ポイント
・class名は自由に設定可能。今回はふわっと出てくる動きをつけたいのでfade-upと指定しました。
・すでにclass名が記述されているものは前に半角スペースを入れて追加します。

STEP2　自作のCSSを</head>直前に読み込む

今回は仮に「style.css」というファイルを作成します。下記のように</head>の直前に設置します。

<link rel="stylesheet" type="text/css" href="style.css">
</head>

STEP3　jQuery本体と自作のJavaScriptファイルを</body>直前に読み込む

「jQuery本体」と「自作のJSファイル」の2つがなければ正しく動作しませんので忘れないようにしましょう〜

jQuery本体にはCDNを使用します。
CDNは（https://code.jquery.com/）から「minified」を選択してコピー、</body>の前に設置しましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</body>

次に自作のJavaScriptファイルはjQuery本体の下に設置しましょう。
今回は仮で「top.js」というファイルを作成します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="top.js"></script> //追記分
</body>

こちらが完成形です。

<body>
  <div class="allwrap">
    <main class="l-main">
        <div class="p-fv">
          <div class="p-fv__inner">
            <div class="p-fv__img"><img src="./assets/img/main.jpg" alt="MV"></div></div>
        </div>
        <div class="p-btn fade-up"><img src="./assets/img/btn.png" alt="click me!"></div>
    </main>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>　// jQuery本体のCDN
  <script src="top.js"></script>  // 自作のJSファイル
</body>

さこちゃん

jQueryは必ず公式サイトから最新のコードをとってね〜
▼公式サイト：https://code.jquery.com/

自作のCSSファイル内にアニメーション用のCSSを書く

自作のCSSファイルにコードを書いていきましょう〜

STEP1　画面右下に要素を固定する

class名「.p-btn」に対し、画面右下に要素を固定する指定を行います。

  .p-btn {
    width: 150px; //　大きさ
    position: fixed; //　固定
    bottom: 20px; //　下から20px
    right: 20px; //　右から20px
  }

STEP2　ふわっと出現するきっかけの起点となるクラス名「fade-up」に「透過0（opacity:0;）」の指定をする

「.fade-up」には動くきっかけの起点となるスタイルを指定します。
ここでは透過0を指定し、非表示にしておきます。

ここで「.is-done」というclass名も作っておきます。
「.is-done」には動いた後の（最終的な）見え方となるスタイルを指定します。
「.fade-up.is-done」とは、.fade-upに.is-doneが付与された時のスタイルです。
JSで.is-doneを付与することで、要素を表示状態にします。

　▼動くきっかけの起点
　.fade-up { 　
    opacity: 0; //　透過0（非表示）
    transform: translateY(30px); //　元の位置より30px下に配置
    transition: all .6s ease; //　滑らかに表示
  }

　▼動いた後の見え方
　.fade-up.is-done { 
    opacity: 1; //　透過1（表示）
    transform: translateY(0); //　元の位置に移動（下から出現）
  }

こちらが完成形です。

　.p-btn {
    width: 150px;
    position: fixed;
    bottom: 20px;
    right: 20px;
  } 

  .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all .6s ease;
  } 

  .fade-up.is-done {
    opacity: 1;
    transform: translateY(0);
  }

jQueryで動きのきっかけを指定する

自作のJSファイルに動きの指定を書いていきましょう。

画面が読み込まれたら、「.fade-up」に「.is-done」というclass名を付与して動かす記述を書きます。

    $(function () { 
      setTimeout(function () {
        $('.fade-up').addClass('is-done');
      }, 5000);
    });

「5000」という数字は、画面の読み込みから5秒でclass名を付与するという意味です。
画面読み込み後、すぐに表示させたい場合は数字の記述は不要です。

イベントの順番はこんな感じです。

1.　ページの読み込みが始まる
2.　HTMLの読み込みが終わる
3.　jQueryが実行される
4.　要素が下からふわっと浮かび上がる

おわり！！！！！！
これでデモ通りの動きが完成したはずです。

おわりに

いかがでしたか？
初心者でもわかるりやすいようjQueryを使用したアニメーションを紹介しました。

簡単に実装できるのでぜひ試してみてくださいね。