Skip to content

jQUery/JavaScriptで作る一定時間ごとに切り替えて表示するアニメーション

March 25

・javascript

複数の画像やテキストを同じ位置で一定時間ごとに切り替えて表示するアニメーションの作り方です。jQueryを使用する方法と使用しない脱jQueryの2パターン作成しました。ページの最後にデモを用意しています。

jQueryで作る切り替えアニメーション

事前準備

jQuery本体を読み込みます。

<script src="jquery-3.3.1.min.js"></script></div>

切り替える要素をhtmlに記述

画像でもできますが、サンプルではテキストを切り替えます。切り替えたいテキスト全てにアニメーション用のclass名を付与します。

<ul>
  <li class="text">テキスト1</li>
  <li class="text">テキスト2</li>
  <li class="text">テキスト3</li>
  <li class="text">テキスト4</li>
</ul>

JavaScriptで切り替える処理を作成

テキストを順番に表示させたいのでインデックス番号の変数を宣言し、-1を代入します。テキストが表示されるところからアニメーションを始めるので、hide()で一旦非表示にします。

const txts = $(".text");
let txtIndex = -1;
txts.hide();

テキストを切り替える関数の中身は「インデックス番号を1ずつ増やす」「eq()で表示したいテキストを指定」「指定したテキストをフェードイン、フェードアウト」になります。

先ほどインデックス番号を-1としたのは関数の最初にインデックス番号を1増やすという処理をするため、テキストの1つ目が最初に表示されるようにするためです。アニメーションではフェードインのあとにすぐフェードアウトをしてしまうと表示されているテキストを読む時間がなくなってしまうのでdelay()をはさみます。フェードアウトのあと、同じ処理を繰り返すためにshowNextTxtを実行します。あとは、読み込み後にshowNextTxtを一度実行するだけです。

function showNextTxt() {
  txtIndex++;
  txts
    .eq(txtIndex % txts.length)
    .fadeIn(2000)
    .delay(3000)
    .fadeOut(2000, showNextTxt);
}
showNextTxt();

jQueryを使用しないJavaScriptで作る切り替えアニメーション

切り替える要素をhtmlに記述

切り替えたいテキスト全てにアニメーション用のclass名を付与します。さらに1つめのテキストにis-activeを付与します（class名は何でも構いません）。

<ul>
  <li class="text is-active">テキスト1</li>
  <li class="text">テキスト2</li>
  <li class="text">テキスト3</li>
  <li class="text">テキスト4</li>
</ul>

CSSで切り替わりのアニメーションを作成

CSSで通常はopacity: 0;、is-activeが付与されたときにopacity: 1;となるよう指定し、jQueryでの「fadeIn」「fadeOut」にあたる部分はtransitionで設定します。サンプルでは2秒かけて「0から1」「1から0」になるようにしました。

.text {
  opacity: 0;
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
}
.text.is-active {
  opacity: 1;
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
}

JavaScriptで切り替える処理を作成

JavaScriptでは、先ほどと同様にテキストのインデックス番号txtIndexに-1を代入します。

const txts = document.getElementsByClassName("text");
let txtIndex = -1;

テキストを切り替える関数では「表示されているテキストをフェードアウトさせて、次のテキストをフェードインさせる」という処理を繰り返します。

関数の具体的な中身は「インデックス番号を1ずつ増やす」「現在表示中のテキストと次に表示するテキストを取得」「現在表示中のテキストからis-activeを取ってdisplay: none;に」、「次に表示するテキストをdisplay: block;にしてからis-activeを付与」です。

jQueryのようなfadeInを実現するためにopacity: 0;のまま一旦display: block;にします。fadeOutはその逆です。

function changeTxt() {
  txtIndex++;

  let currentNum = txtIndex % txts.length;
  let nextNum = (txtIndex + 1) % txts.length;
  let current = txts[currentNum];
  let next = txts[nextNum];

  setTimeout(function () {
    current.classList.remove("is-active");
  }, 3000);
  setTimeout(function () {
    current.style.display = "none";
    next.style.display = "block";
  }, 5100);

  setTimeout(function () {
    next.classList.add("is-active");
  }, 5200);
}

アニメーションを繰り返す関数を作成します。ここでは、テキスト切り替えの関数をsetIntervalで一定時間ごとに繰り返す処理をします。

function showNextTxt() {
  setInterval(changeTxt, 7200);
}

最後に、setIntervalは指定した時間ごとに処理を繰り返しますが、最初の1回も指定時間待たなければ実行されません。そこで繰り返しの関数の実行の前に、読み込み後1度だけテキスト切り替えの関数（changeTxt）を実行することで、最初の1回だけ切り替えまで長く時間がかかってしまうということがないようにします。

changeTxt();
document.addEventListener("DOMContentLoaded", showNextTxt, false);

デモ

「jQUery/JavaScriptで作る一定時間ごとに切り替えて表示するアニメーション」のデモはこちら

参考

Tags

jquery animation how-to