MVなどで画像がフェードインして切り替わるJS

2025年12月17日 JavaScript,MVなどで、画像がフェードインして切り替わる

動きを実現する仕組み

JavascriptでMVなどで画像がフェードインして切り替わる


STEP1　HTMLコード


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test2</title>
    <meta name="description" content="これはJsのTestページです" />
    <meta name="keywords" content="test, サンプル, ウェブサイト" />

    <!-- Google Fontsの読み込み -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@   200..900&display=swap"
      rel="stylesheet"
    />

    <!-- CSSファイルの読み込み -->
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/header.css" />
    <link rel="stylesheet" type="text/css" href="css/mv.css" />
  </head>
  <body>
    <header id="header">
      <div class="header_inner">
        <div class="header_logo">
          <a href="index.html"><img src="images/logo2.svg" alt="ロゴ画像" /></a>
        </div>
        <nav class="header_nav">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="test1.html">Test1</a></li>
            <li><a href="test2.html">Test2</a></li>
            <li><a href="access.html">Access</a></li>
          </ul>
          <div class="header_btn">
            <a href="#" class="btn_basic">お問い合わせ</a>
          </div>
        </nav>
      </div>
    </header>

    <div class="mv_top_wrapper">
        <div class="mv_top_inner">
            <div class="mv_top_content">
              <ul>
                <li><img class="mv_image" src="images/mv1.jpg" alt="画像1" /></li>
                <li><img class="mv_image" src="images/mv2.jpg" alt="画像2" /></li>
                <li><img class="mv_image" src="images/mv3.jpg" alt="画像3" /></li>
              </ul>
            </div>
        </div>
    </div>

    <main id="main">

    </main>
    <footer>
      <div class="footer_inner"></div>
    </footer>
    <!-- JavaScriptファイルの読み込み -->
    <script src="js/anime_mv.js"></script>
  </body>
</html>

CSSでコーディング


STEP2　cssコード


normalize.css

@charset "utf-8";

/*---------------サイトの基本設定---------------*/

/*html&bodyの設定*/
html {
  font-size: 62.5%; /* 1rem = 10px */
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  font-family: "YakuHanJPs_Noto", "Roboto", "Noto Sans JP", "游ゴシック Medium",
    "游ゴシック体", "Yu Gothic Medium", "YuGothic", "ヒラギノ角ゴ ProN",
    "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.8;
  width: 100%;
}

/* Box Sizing の設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* - -  h1.h2.h3....  - - */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  color: #000;
  overflow-wrap: break-word;
}

/* -- a -- */
a {
  text-decoration: none;
  outline: none;
  color: #000;
}

a,
a > img {
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

/* -- img -- */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* -- ul -- */
ul {
  list-style: none;
}
li {
  list-style: none;
}

/* -- :hover -- */
a:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  cursor: pointer;
}

/* -- inputの設定 --*/
input[type="text"] {
  font-size: 1rem;
}
input[type="submit"] {
  padding: 8px;
  border: #efefef;
  color: #000;
  background-color: aliceblue;
}

/*--  フォーム要素の設定  --*/
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

/*--テーブルのborder-collapse*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

style.css

@charset "utf-8";

/*---------------rootの基本設定---------------*/
:root {
  /* カラーパレット */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --bg-beige: #f3f0e8;
  --text-color: #333;
  --white--: #ffffff;
  --gold--: #b49f68;
  --black--: #000000;
  --footer-bg: #222222;

  /* フォントサイズ */
  --font-small: 12px; /* 12px */
  --font-medium: 16px; /* 16px */
  --font-large: 20px; /* 20px */

  /* スペーシング */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
}
/*---------------設定終了---------------*/

/*---------------デバイス別表示・非表示---------------*/
/* PC専用（769px以上で表示） */
.pc-only {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

/* タブレット専用（768px〜1024px） */
.tablet-only {
  display: none;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .tablet-only {
    display: block;
  }
}

/* スマホ専用（500px以下で表示） */
.sp-only {
  display: none;
}
@media screen and (max-width: 500px) {
  .sp-only {
    display: block !important;
  }
}

/* モバイル専用（768px以下で表示：タブレット+スマホ） */
.mobile-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
}
/*---------------デバイス別表示・非表示の設定終了---------------*/

/*---------------全体のフォント設定---------------*/
body {
  font-family: "Noto Serif JP", "Helvetica Neue", Arial, sans-serif;
}
/*---------------全体のフォント設定終了---------------*/

header.css

@charset "utf-8";

/*---------------headerの設定-------------------------------*/

#header {
  background-color: var(--white--);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
.header_inner {
  width: 100%;
  height: 70px;
  margin-inline: auto;
  padding-block: min(0.69vw, 10px);
  padding-inline: min(1.39vw, 20px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_logo img {
  width: 100%;
}
.header_nav {
  display: flex;
  align-items: center;
}
.header_nav ul {
  list-style: none;
  display: flex;
  gap: min(1.39vw, 20px);
  margin-right: min(1.39vw, 20px);
  padding: 0;
}
.header_nav ul li a {
  text-decoration: none;
  color: var(--text-color);
  font-size: min(1.11vw, 16px);
  font-weight: 500;
}
.header_nav ul li a:hover {
  color: var(--primary-color);
}
.header_btn .btn_basic {
  background-color: var(--gold--);
  color: var(--white--);
  font-size: min(1.11vw, 16px);
  padding-block: min(0.69vw, 10px);
  padding-inline: min(1.39vw, 20px);
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
}
.header_btn .btn_basic:hover {
  background-color: var(--black--);
}
/*---------------headerの設定終了-------------------------------*/

ここからがこの記事のメインのcssコード

@charset "utf-8";

/*---------------mv-topの基本設定---------------*/
.mv_top_wrapper {
  position: relative;
  /*padding-top: min(2.08vw, 30px);
  padding-inline: min(2.08vw, 30px);
  padding-bottom: min(2.08vw, 30px);*/ /*paddingさせたい場合はコメントアウト解除*/
  background-color: var(--bg-beige);
  overflow-x: hidden; /* 横スクロールを防止 */
  max-width: 100vw; /* 画面幅を超えないように */
  margin-top: 70px; /* ヘッダー分の余白 */
}

/*---------------mv-topコンテンツの基本設定---------------*/
.mv_top_content {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-x: hidden; /* 横スクロールを明示的に防止 */
}

.mv_top_content ul {
  /*position: relative;*/ /*/*余白させたい場合はコメントアウト解除*/
  width: 100%;
  aspect-ratio: 2 / 1; /* 2:1の比率を維持 */
}

@media screen and (max-width: 768px) {
  .mv_top_content ul {
    aspect-ratio: 16 / 9; /* 横:縦 の比率 */
  }
}

.mv_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1; /* グラデーションより下に配置 */
}

.mv_image.active {
  opacity: 1;
}


JSを使ってJSコード作成


STEP3　JSコード


document.addEventListener("DOMContentLoaded", () => {
  const images = document.querySelectorAll(".mv_image");
  let currentIndex = 0;

  // 最初の画像に "active" クラスを追加
  if (images.length > 0) {
    images[currentIndex].classList.add("active");
  }

  setInterval(() => {
    // 現在の画像を非表示にする
    images[currentIndex].classList.remove("active");

    // 次の画像を表示する
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add("active");
  }, 4000); // 4秒ごとに切り替え
});

コチラのサイトはコチラから