tips / javascript

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

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

CONTENTS

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

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

jQuery本体を読み込みます。

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

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

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

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

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

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

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

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

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

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

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

CSS
.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では、先ほどと同様にテキストのインデックス番号txtIndex-1を代入します。

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

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

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

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

JavaScript
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で一定時間ごとに繰り返す処理をします。

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

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

JavaScript
changeTxt();
document.addEventListener('DOMContentLoaded', showNextTxt, false);

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

参考 : Qiita「javascript で fadeOut() したい」, <https://qiita.com/snjssk/items/1ae5308f3a26f15f697f>(参照2019-3-24)

参考 : 森のコーディング「javascriptでsetIntervalの最初の1回はまたずにすぐに実行したい時」, <http://mori-coding.blog.jp/archives/7211359.html>(参照2019-3-24)

< Prev PostNext Post >