【jQuery】一定時間経過後に要素を浮き上がらせる方法

2020-04-08

Webサイトのページにおいて、jQueryを使った一定時間後に要素を浮き上がらせる方法について記載していきます。

「要素を浮き上がらせる女の子」

使用するケース

ほとんどの場合、メインビジュアル上の文字や画像に使われます。

最初は無かったものが現れることによって、浮き上がった要素にインパクトを持たせる効果があります。

サンプル

リンク

方法

「jQuery」を使用して実装を行いますので、「body」の最後に下記の通りjQueryの読み込み用コードを追記します。
※ダウンロードしたものを使用してもOKです 

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

浮き上がらせる対象に、下記のクラスをつけたとします。

<p class="catch">サンプル</p>

CSSにて、上記対象が初期状態で非表示になるようにします。

.catch{
  display:none;
}

そして、jQueryの読み込みコードの下に書くコードはこちらです。 

  $(function() {
      setInterval(function() {
        $('.catch').fadeIn();
      }, 1000);

    });

説明

setInterval(function() {~}, n);
については、「~」の処理をn/1000秒後に実行するという記述になります。

つまり例のコードでは、
$('.catch’).fadeIn();
という「catchをフェードインする処理」を1秒後に実行するという内容になります。

上記リンクから飛べるサンプルでは、2つのテキストで処理までの時間を2パターンに分けて、時間差で表示されるように設定しています。

以上となります。

Web制作,jQuery