JavaScript のsetInterval()関数とCSSの@keyframesを組み合わせ、一定時間毎に表示がフワッと変わる実装方法を紹介します。
なお、フワッとではなく瞬時に切り替えるだけなら以下記事で紹介しています。（本記事はその応用編です。）
また、クリックで能動的に表示を変える方法（カルーセル）も公開しています。
いずれも自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！
実装例とコード
以下のテキストが、3秒毎にふわっと変わっていきます。
（「こんにちは！」→「Hello！」→「你好！」→「Bonjour！」→「Guten Tag！」の繰り返し）
こんにちは！
Hello!
你好！
Bonjour！
Guten Tag！
複雑なアニメーションには、CSSプロパティの@keyframesを使います！
以下のように記述することで、特定の要素に多様なアニメーションがつけられます。
div {
animation: 1s xxx;
}
@keyframes xxx { /* xxxは好きな名前でOK */
0% {
/* 変化前の状態 */
}
50% {
/* 変化中の状態。%の値は自由に決められ、複数用意してもOK。 */
}
100% {
/* 変化後の状態 */
}
}上の例のように、@keyframeで変化の内容を記述し、変化をつけたいスタイルにアニメーション名と変化時間を記載します。これでdiv要素には、@keyframesに設定したアニメーションが1秒かけて実装されます。
シンプルなアニメーションについてはこちら
マウスホバーやボタンクリック（タップ）に反応するような、シンプルなアニメーションには「transform」や「transition」を使います。以下のような実装に向いています。
特定の処理を繰り返し実行するには、JavaScriptの「setInterval()」関数を使います！
以下のように記述することで、特定の要素に多様なアニメーションがつけられます。
第1引数に繰り返したい関数（関数名の後ろに()は付けないこと）、第2引数にミリ秒単位の数字を設定すると、設定した関数がミリ秒単位で繰り返し実行されます。
function show() {
console.log('hello');
}
setInterval(show, 1000);上の例では、1000ミリ秒（1秒）毎にshow関数が実行されます。
以下、実装例のHTML・CSS・JavaScriptコードです。
HTML/CSS/JavaScript
<p class="message appear">こんにちは！</p>
<p class="message">Hello!</p>
<p class="message">你好！</p>
<p class="message">Bonjour！</p>
<p class="message">Guten Tag！</p>- 予め表示したいテキストすべてを記述しておき、CSSの「display: none;」と「display: block;」を使って最初に表示したいものだけを表示させておく。
.message {
display: none;
text-align: center;
}
.message.appear {
display: block;
animation: 2s fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}- 「display: none;」と「display: block;」を使い、appearクラスがついたテキストだけが表示されるようにする。
- @keyframesでは、初期（0%）はopacityを0、変化後（100%）はopacityを1とする。さらに表示テキストのクラスに2秒のanimationを設定することで、2秒かけてopacityが0から1になるアニメーション（ふわっと表示）が付けられる。
const messages = document.querySelectorAll('.message');
// 次の画像から表示されるようにする
let currentIndex = 1;
function messageAppear() {
// currentIndexがmessages.lengthに等しいとき（最後のメッセージが表示されたとき）に0にリセット
if (currentIndex >= messages.length) {
currentIndex = 0;
}
// すべてのメッセージからappearクラスを削除
messages.forEach(message => {
message.classList.remove('appear');
});
// 現在のメッセージにappearクラスを追加
messages[currentIndex].classList.add('appear');
// 次のメッセージに進む
currentIndex++;
}
// 3秒ごとにmessageAppearを呼び出す
setInterval(messageAppear, 3000);- setInterval関数を使い、appearクラスを3秒毎に付け外しする。appearクラスが付くとCSSで設定した@keyframesのアニメーションが起動し、連続してフワッとした表示になる。
応用例
前回の記事 で紹介した関連記事を3秒毎に変更する方法も、こんな風にふわっと表示切り替えができます。
さらに、以下のように画像をズームしつつフワッと切り替えていくような実装も可能です。
Webサイトのトップページで見かける、メイン画像がフワッと切り替わっていくような実装にも使えそうですね。
ぜひ、いろいろな使い方を模索してみてください！
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。