▲TOPへ戻る

【javascript】イメージスライダー javascriptを使って、HTML生成、CSS制御、レスポンシブ対応

スライダー
サイト内検索

以前にCSSだけでつくったスライダーを紹介しましたが、 今回は、javascriptでhtmlを生成し、レスポンシブ対応させたいと思います。

CSSだけで作ったスライダーは、HTML17行CSS528行でしたが、
javascriptで作ると、HTML1行CSS186行javascript86行 で、作ることができました。

参考

CSSだけで作るスライダーは以下参照

js
【CSS】レスポンシブ対応 アニメーションスライダーの作り方 javascriptなし

HTML

今回は、javascriptでhtmlを生成するので、HTMLは一行だけです。

  <div class="wrapper"></div>

CSS

CSSのカスタムプロパティを使って変数を定義します。

  :root {
    --transform1: translate3d(360px, -50%, -460px) rotate3d(0, 1, 0, -30deg);
    --transform2: translate3d(50px, -50%, -110px) rotate3d(0, 1, 0, -15deg);
    --transform3: translate3d(-50%, -50%, 0) scale(1.3);
    --transform4: translate3d(-390px, -50%, -110px) rotate3d(0, 1, 0, 15deg);
    --transform5: translate3d(-710px, -50%, -460px) rotate3d(0, 1, 0, 30deg);
  }  
    .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 430px;
    background: #333;
    perspective: 600px;
    margin: 100px auto;
  }
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 225px;
    object-fit: contain;
    box-shadow: 0px 15px 10px #fff;
  }
  .box:nth-of-type(1) {
    transform: var(--transform1);
    z-index: 80;
    animation: box1 15s ease-in infinite;
  }
  .box:nth-of-type(2) {
    transform: var(--transform2);
    z-index: 90;
    animation: box2 15s ease-in infinite;
  }
  .box:nth-of-type(3) {
    transform: var(--transform3);
    z-index: 100;
    animation: box3 15s ease-in infinite;
  }
  .box:nth-of-type(4) {
    transform: var(--transform4);
    z-index: 90;
    animation: box4 15s ease-in infinite;
  }
  .box:nth-of-type(5) {
    transform: var(--transform5);
    z-index: 80;
    animation: box5 15s ease-in infinite;
  }
  @keyframes box1 {
    3%,
    20% {
      transform: var(--transform2);
      z-index: 90;
    }
    23%,
    40% {
      transform: var(--transform3);
      z-index: 100;
    }
    43%,
    60% {
      transform: var(--transform4);
      z-index: 90;
    }
    63%,
    80% {
      transform: var(--transform5);
      z-index: 80;
    }
    83%,
    100% {
      transform: var(--transform1);
      z-index: 80;
    }
  }
  @keyframes box2 {
    3%,
    20% {
      transform: var(--transform3);
      z-index: 100;
    }
    23%,
    40% {
      transform: var(--transform4);
      z-index: 90;
    }
    43%,
    60% {
      transform: var(--transform5);
      z-index: 80;
    }
    63%,
    80% {
      transform: var(--transform1);
      z-index: 80;
    }
    83%,
    100% {
      transform: var(--transform2);
      z-index: 90;
    }
  }
  @keyframes box3 {
    3%,
    20% {
      transform: var(--transform4);
      z-index: 90;
    }
    23%,
    40% {
      transform: var(--transform5);
      z-index: 80;
    }
    43%,
    60% {
      transform: var(--transform1);
      z-index: 80;
    }
    63%,
    80% {
      transform: var(--transform2);
      z-index: 90;
    }
    83%,
    100% {
      transform: var(--transform3);
      z-index: 100;
    }
  }
  @keyframes box4 {
    3%,
    20% {
      transform: var(--transform5);
      z-index: 80;
    }
    23%,
    40% {
      transform: var(--transform1);
      z-index: 80;
    }
    43%,
    60% {
      transform: var(--transform2);
      z-index: 90;
    }
    63%,
    80% {
      transform: var(--transform3);
      z-index: 100;
    }
    83%,
    100% {
      transform: var(--transform4);
      z-index: 90;
    }
  }
  @keyframes box5 {
    3%,
    20% {
      transform: var(--transform1);
      z-index: 80;
    }
    23%,
    40% {
      transform: var(--transform2);
      z-index: 90;
    }
    43%,
    60% {
      transform: var(--transform3);
      z-index: 100;
    }
    63%,
    80% {
      transform: var(--transform4);
      z-index: 90;
    }
    83%,
    100% {
      transform: var(--transform5);
      z-index: 80;
    }
  }

javascript

CSSで定義した変数をjavascriptで制御します。

        const imgArr = [  //  画像のパスを配列へ
    "../../images/blog/202110/1 (1).JPG",
    "../../images/blog/202110/1 (2).JPG",
    "../../images/blog/202110/1 (3).JPG",
    "../../images/blog/202110/1 (4).JPG",
    "../../images/blog/202110/1 (5).JPG",
  ];
  const wrapper = document.querySelector(".wrapper");   //  この要素内にHTMLを生成   
  const wrapperWidth = wrapper.clientWidth;   //  横幅取得
    
  if (wrapperWidth > 500 && wrapperWidth < 850) {   //  500px以上850px未満の時の処理
    for (let i = 0; i < imgArr.length; i++) {
      const element = imgArr[i];
      const box = document.createElement("div");
      const img = document.createElement("img");
      box.classList.add("box");
      box.style = "width: 200px; height: 120px;";
      img.src = element;
      document.documentElement.style.setProperty(
        "--transform1",
        "translate3d(235px, -50%, -460px) rotate3d(0, 1, 0, -50deg)"
      );
      document.documentElement.style.setProperty(
        "--transform2",
        "translate3d(55px, -50%, -110px) rotate3d(0, 1, 0, -45deg)"
      );
      document.documentElement.style.setProperty(
        "--transform3",
        "translate3d(-50%, -50%, 0) scale(1.3)"
      );
      document.documentElement.style.setProperty(
        "--transform4",
        "translate3d(-245px, -50%, -110px) rotate3d(0, 1, 0, 45deg)"
      );
      document.documentElement.style.setProperty(
        "--transform5",
        "translate3d(-435px, -50%, -460px) rotate3d(0, 1, 0, 50deg)"
      );
      wrapper.appendChild(box);
      box.appendChild(img);
      
      wrapper.style.height = "300px";
    }
  } else if (wrapperWidth < 500) {   //  500px未満の時の処理
    for (let i = 0; i < imgArr.length; i++) {
      const element = imgArr[i];
      const box = document.createElement("div");
      const img = document.createElement("img");
      box.classList.add("box");
      box.style = "width: 140px; height: 80px;";
      img.src = element;
      document.documentElement.style.setProperty(
        "--transform1",
        "translate3d(170px, -50%, -460px) rotate3d(0, 1, 0, -50deg)"
      );
      document.documentElement.style.setProperty(
        "--transform2",
        "translate3d(35px, -50%, -110px) rotate3d(0, 1, 0, -45deg)"
      );
      document.documentElement.style.setProperty(
        "--transform3",
        "translate3d(-50%, -50%, 0) scale(1.3);"
      );
      document.documentElement.style.setProperty(
        "--transform4",
        "translate3d(-175px, -50%, -110px) rotate3d(0, 1, 0, 45deg)"
      );
      document.documentElement.style.setProperty(
        "--transform5",
        "translate3d(-310px, -50%, -460px) rotate3d(0, 1, 0, 50deg)"
      );
      wrapper.appendChild(box);
      box.appendChild(img);
      wrapper.style.height = "230px";
    }
  } else {   //  850px以上の時の処理
    for (let i = 0; i < imgArr.length; i++) {
      const element = imgArr[i];
      const box = document.createElement("div");
      const img = document.createElement("img");
      box.classList.add("box");
      img.src = element;
      wrapper.appendChild(box);
      box.appendChild(img);
    }
  } 
point

画像のパスを配列に

CSSのカスタムプロパティで画像5枚分のtransformを定義する。

javascriptで、横幅に合わせてCSSを制御し、レスポンシブに対応させる。

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

サイト内検索👇