Gemini :スライドプログラム

..............................................
<div id="slideshow_container">
<div id="slideshow">
  <img src="" class="active" alt="slideshow image">
</div>
  <p>Global Winterscapes</p>
</div>
......................................

/* slide */
#slideshow_container {
}
#slideshow_container p {
  text-align:right;
  color:white;
  font-size:1.2rem;
  padding:0px;
  margin:0px 5px 2px 0px;
  font-family: "Monotype Corsiva", "Apple Chancery", "Lucida Calligraphy", "Palatino Linotype", "Dancing Script", cursive;
}
#slideshow {
  margin:2px auto;
  position: relative;
  width: 80%;
  aspect-ratio: 16 / 9;
  overflow: hidden; /* 画像がはみ出さないように */
}
#slideshow img {
  position: absolute;
  top: 0;
  left: 0;  
  width: 100%;       /* 横幅を枠いっぱいにする */
  height: 100%;      /* 高さを枠いっぱいにする */
  object-fit: cover; /* 枠に合わせてトリミング（隙間なく埋める） */
  object-position: center center; /* 画像の中心を基準にする */
  opacity: 0;
  transition: opacity 2s ease-in-out, transform 12s linear;
  will-change: opacity, transform;
}
/* 表示状態（JSでこのクラスをつける） */
#slideshow img.active {
  opacity: 1;
}
/*-------------- mobile responsive -----iphone6s --------------------*/
@media screen and  (max-width: 480px) { 
#slideshow {
  margin:2px auto;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

}

/* === アニメーションのバリエーション === */
/* パターンA: ズームイン */
.effect-zoom-in {
  transform: scale(1.0);
}
.effect-zoom-in.active {
  transform: scale(1.15); /* 1.15倍までゆっくり拡大 */
}

/* パターンB: ズームアウト */
.effect-zoom-out {
  transform: scale(1.15);
}
.effect-zoom-out.active {
  transform: scale(1.0);
}

/* パターンC: 左へ少しスライド */
.effect-slide-left {
  transform: translateX(50px);
}
.effect-slide-left.active {
  transform: translateX(0);
}

/* パターンD: ただのフェード（動きなし） */
.effect-fade {
  transform: scale(1.0);
}

// 2025.12.26 
fetch('topimages/images.json')
  .then(response => response.json())
  .then(images => {
    const slideshow = document.getElementById('slideshow');
    // 最初にHTMLにあるimg要素（あれば）
    const initialImg = slideshow.querySelector('img');

    // アニメーションのクラス名リスト
    const effects = ['effect-zoom-in', 'effect-zoom-out', 'effect-slide-left', 'effect-fade'];

    // 初期画像の処理（あれば）
    if (initialImg && images.length > 0) {
      initialImg.src = images[Math.floor(Math.random() * images.length)];
      initialImg.classList.add('active', 'effect-zoom-in'); // 最初はズームインなどで
    }

    function changeImage() {
      const randomIndex = Math.floor(Math.random() * images.length);
      const newImage = images[randomIndex];

      const newImg = document.createElement('img');
      newImg.src = newImage;
      newImg.alt = "slideshow image";

      // --- 【変更点1】ランダムにエフェクトを選ぶ ---
      const randomEffect = effects[Math.floor(Math.random() * effects.length)];
      newImg.classList.add(randomEffect);

      // 初期状態はopacity:0 (CSSで定義済みだが念のためクラス追加前に追加)
      slideshow.appendChild(newImg);

      // --- 【変更点2】フェードイン開始 ---
      // ブラウザの描画タイミングを待ってからactiveクラス（opacity:1 + transform）を付与
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          newImg.classList.add('active');
        });
      });

      // --- 【変更点3】古い画像の削除タイミング ---
      // CSSのtransition: opacity 2s に合わせ、完全に重なり終わってから削除する
      setTimeout(() => {
        const oldImgs = slideshow.querySelectorAll('img');
        // 新しい画像(最後に追加されたもの)以外を削除
        if (oldImgs.length > 1) {
          // 念のため、現在表示中の画像以外をループで削除
          for (let i = 0; i < oldImgs.length - 1; i++) {
             oldImgs[i].remove();
          }
        }
      }, 2500); // フェード時間(2000ms)より少し長く待つのがコツ
    }

    // 12秒ごとに切り替え
    setInterval(changeImage, 12000);
  })
  .catch(error => {
    console.error('画像リスト読み込みエラー:', error);
  });