Nagashima Laboratory

ギャラリー + アニメーション（JavaScript）

Web Animations APIと、for文を使った繰り返し処理で、画像ギャラリーの表示にアニメーション効果を加えます。

キーワード：配列、繰り返し（for）、Web Animations API

作成例（完成イメージ）

【準備】フォルダ：javascript_gallery2

①JavaScriptを書くための準備で作成したフォルダ（空のHTML、CSS、JavaScriptが入っている）を準備します。GitHubからもダウンロードできます。

②フォルダの名前を「javascript_gallery2」に変更します

③同じサイズの画像を6枚程度用意します。作例と同じ画像を使う方は、Githubからダウンロードしてください。

画像は images フォルダに入れます。

HTMLとCSSファイルの準備

まず、コンテンツ部分を用意します。

▼index.html

  <header>
    <h1>Photo Gallery</h1>
  </header>
  <main>
   <div id="gallery">
    <div class="img-item"><img src="images/img01.png" alt="number 1"><p>number 1</p></div>
    <div class="img-item"><img src="images/img02.png" alt="number 2"><p>number 2</p></div>
    <div class="img-item"><img src="images/img03.png" alt="number 3"><p>number 3</p></div>
    <div class="img-item"><img src="images/img04.png" alt="number 4"><p>number 4</p></div>
    <div class="img-item"><img src="images/img05.png" alt="number 5"><p>number 5</p></div>
    <div class="img-item"><img src="images/img06.png" alt="number 6"><p>number 6</p></div>
   </div>
  </main>

▼style.css

h1 {
  text-align: center;
}

#gallery {
  display: grid;
  max-width: 1000px;
  margin: auto;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.img-item {
  opacity: 0;
  filter: blur(10px);
  width: 100%;
}

.img-item img {
  width: 100%;
  height: auto;
}

.img-item p {
  text-align: center;
}

footer {
  text-align: center;
  color: #EEE;
}

定数の定義

▼script.js

const items = document.querySelectorAll('.img-item');
console.log(items);

.img-itemクラスをまとめて取得するため、querySelectorAll を使います。console.logを使って、itemsの中身を見ると、配列形式で取得できていることが確認できます。

繰り返し処理（For文）

複数の画像を表示させるためには、For文繰り返し（ループ）処理を行います。

簡単な例でforの使用例を見ていきます。

▼コンソールに入力

for( let i = 0; i < 5; i++) {
  console.log(i);
}

let i = 0;　…初期化処理。iに0を代入

i < 5;　…ループ継続のための条件式

i++　…ループごとの最後に実行される式

i = 0からスタートして、ループごとに１増えていきます。i が5より小さいとき（4）まで実行されるので、最終的には５回の処理が行われます。

図にすると次のような処理をしています。

今回の場合は、画像の数だけ、処理を繰り返すことになるため「画像の数」を取得する必要が出てきます。

画像の数は、lengthで数えることができます。

▼script.js

console.log(items.length);

画像の表示をするには下記のように記述します。

▼script.js

// for文
for(let i = 0; i < items.length; i++){

  const keyframes = {
    opacity: [0, 1],
    translate: ['0 50px', 0],
    filter: ['blur(10px)', 'blur(0)'],
  };
  
  const options = {
    duration: 600,
    delay: i * 400,
    fill: 'forwards',
  };

  items[i].animate(keyframes, options);
}

1枚ずつ遅延させる

ループのたびに、遅延させることで、１枚ずつ遅れて表示されるようになります。

▼script.js

  const options = {
    duration: 600,
    fill: 'forwards',
    delay: i * 400,
  };

【参考】forEach文への書き換え

同じ動作をforEach文で書き換えることもできます。

▼script.js

// forEach文
items.forEach((item, i) => {

  const keyframes = {
    opacity: [0, 1],
    translate: ['0 50px', 0],
    filter: ['blur(10px)', 'blur(0)'],
  };
  
  const options = {
    duration: 600,
    delay: i * 400,
    fill: 'forwards',
  };

  item.animate(keyframes, options);
});

参考書籍・リンク