▲TOPへ戻る

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

以下のようなイメージスライダー作ってみました。javascriptは使っていません。

画像を取り除くとこんな感じで挙動します。

画面幅850px以上、500px以上850px未満、 500px未満の3パターンを作りました。
ページ下部に全てのコードをダウンロードできるリンクを貼っておきます。

デモページ

3パターン全部見る

レスポンシブ対応

HTML

  <div class="wrapper">
    <div class="box">
      <img src="https://gxy-life.com/images/blog/202110/1 (1).JPG">
    </div>
    <div class="box">
      <img src="https://gxy-life.com/images/blog/202110/1 (2).JPG">
    </div>
    <div class="box">
      <img src="https://gxy-life.com/images/blog/202110/1 (3).JPG">
    </div>
    <div class="box">
      <img src="https://gxy-life.com/images/blog/202110/1 (4).JPG">
    </div>
    <div class="box">
      <img src="https://gxy-life.com/images/blog/202110/1 (5).JPG">
    </div>
  </div>

CSS

Point1

親要素に

  .wrapper{
    position: relative
    perspective: 600px;
  }

perspectiveで立体的に表現できます。

Point2

子要素に

  .box{
    position: absolute             
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

これで親要素の真ん中に画像を配置

Point3

5枚の画像の位置を決める

  .box:nth-of-type(1) {   /*  一番右  */
    transform: translate3d(235px, -50%, -460px) 
  }
  .box:nth-of-type(2) {   /* 右から2番目 */
    transform: translate3d(55px, -50%, -110px) 
  }
  .box:nth-of-type(3) {   /* 真ん中  */
    transform: translate3d(-50%, -50%, 0);
  }
  .box:nth-of-type(4) {   /* 左から2番目 */
    transform: translate3d(-245px, -50%, -110px)
  }
  .box:nth-of-type(5) {   /* 一番左  */
    transform: translate3d(-435px, -50%, -460px)
  }

Point4

アニメーションを記述

とりあえず真ん中の画像のアニメーションだけ記述します。

  .box:nth-of-type(3) { /* 真ん中の画像 */
      animation: boxc 15s ease-in infinite;    /* 15秒間 繰り返す */
    }
    @keyframes boxc {
    3%,   /* 15秒のうち3%でこの位置まで移動し、20%まで維持 */
    20% {
      transform: translate3d(-245px, -50%, -110px) rotate3d(0, 1, 0, 45deg);
      z-index: 90;
    }
    23%,
    40% {
      transform: translate3d(-435px, -50%, -460px) rotate3d(0, 1, 0, 50deg);
      z-index: 80;
    }
    43%,
    60% {
      transform: translate3d(235px, -50%, -460px) rotate3d(0, 1, 0, -50deg);
      z-index: 80;
    }
    63%,
    80% {
      transform: translate3d(55px, -50%, -110px) rotate3d(0, 1, 0, -45deg);
      z-index: 90;
    }
    83%,
    100% {
      transform: translate3d(-50%, -50%, 0) scale(1.5);
      z-index: 100;
    }
  }

Point5

z-indexで真ん中の画像を一番手前に表示されるようにする。

  .box:nth-of-type(1) {   /*  一番右  */
    z-index: 80
  }
  .box:nth-of-type(2) {   /* 右から2番目 */
    z-index: 90
  }
  .box:nth-of-type(3) {   /* 真ん中  */
    z-index: 100
  }
  .box:nth-of-type(4) {   /* 左から2番目 */
    z-index: 90
  }
  .box:nth-of-type(5) {   /* 一番左  */
    z-index: 80
  }

Point6

transformにratate3dを加えて角度を変える 

  .box:nth-of-type(1) {   /*  一番右  */
    transform: rotate3d(0, 1, 0, -50deg);
  }
  .box:nth-of-type(2) {    /* 右から2番目 */
    transform: rotate3d(0, 1, 0, -45deg);
  }
  .box:nth-of-type(3) {    /* 真ん中  */
    /* transform: rotate3d  なし  */
  }
  .box:nth-of-type(4) {    /* 左から2番目 */
    transform: rotate3d(0, 1, 0, 45deg);
  }
  .box:nth-of-type(5) {    /* 一番左  */
    transform: rotate3d(0, 1, 0, 50deg);
  }

全てのCSSは以下の通り。

画像5枚分のCSSを書くとかなりの量になります。

 .wrapper{   /* 親要素 */
    position: relative;
    width: 850px;
    height: 430px;
    background: #333;
    perspective: 600px;
  }
  .box, {
    width: 350px;
    height: 225px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    box-shadow: 0px 15px 10px #fff;
  }
  
  .box:nth-of-type(1) {
    transform: translate3d(235px, -50%, -460px) rotate3d(0, 1, 0, -50deg);
    z-index: 80;
    animation: boxa 15s ease-in infinite;
  }
  .box:nth-of-type(2) {
    transform: translate3d(55px, -50%, -110px) rotate3d(0, 1, 0, -45deg);
    z-index: 90;
    animation: boxb 15s ease-in infinite;
  }
  .box:nth-of-type(3) {
    transform: translate3d(-50%, -50%, 0) scale(1.5);
    z-index: 100;
    animation: boxc 15s ease-in infinite;
  }
  .box:nth-of-type(4) {
    transform: translate3d(-245px, -50%, -110px) rotate3d(0, 1, 0, 45deg);
    z-index: 90;
    animation: boxd 15s ease-in infinite;
  }
  .box:nth-of-type(5) {
    transform: translate3d(-435px, -50%, -460px) rotate3d(0, 1, 0, 50deg);
    z-index: 80;
    animation: boxe 15s ease-in infinite;
  }
  @keyframes boxa {
    3%,
    20% {
      transform: translate3d(55px, -50%, -110px) rotate3d(0, 1, 0, -45deg);
      z-index: 90;
    }
    23%,
    40% {
      transform: translate3d(-50%, -50%, 0) scale(1.5);
      z-index: 100;
    }
    43%,
    60% {
      transform: translate3d(-245px, -50%, -110px) rotate3d(0, 1, 0, 45deg);
      z-index: 90;
    }
    63%,
    80% {
      transform: translate3d(-435px, -50%, -460px) rotate3d(0, 1, 0, 50deg);
      z-index: 80;
    }
    83%,
    100% {
      transform: translate3d(235px, -50%, -460px) rotate3d(0, 1, 0, -50deg);
      z-index: 80;
    }
  }
  @keyframes boxb {
    3%,
    20% {
      transform: translate3d(-50%, -50%, 0) scale(1.5);
      z-index: 100;
    }
    23%,
    40% {
      transform: translate3d(-245px, -50%, -110px) rotate3d(0, 1, 0, 45deg);
      z-index: 90;
    }
    43%,
    60% {
      transform: translate3d(-435px, -50%, -460px) rotate3d(0, 1, 0, 50deg);
      z-index: 80;
    }
    63%,
    80% {
      transform: translate3d(235px, -50%, -460px) rotate3d(0, 1, 0, -50deg);
      z-index: 80;
    }
    83%,
    100% {
      transform: translate3d(55px, -50%, -110px) rotate3d(0, 1, 0, -45deg);
      z-index: 90;
    }
  }
  @keyframes boxc {
    3%,
    20% {
      transform: translate3d(-245px, -50%, -110px) rotate3d(0, 1, 0, 45deg);
      z-index: 90;
    }
    23%,
    40% {
      transform: translate3d(-435px, -50%, -460px) rotate3d(0, 1, 0, 50deg);
      z-index: 80;
    }
    43%,
    60% {
      transform: translate3d(235px, -50%, -460px) rotate3d(0, 1, 0, -50deg);
      z-index: 80;
    }
    63%,
    80% {
      transform: translate3d(55px, -50%, -110px) rotate3d(0, 1, 0, -45deg);
      z-index: 90;
    }
    83%,
    100% {
      transform: translate3d(-50%, -50%, 0) scale(1.5);
      z-index: 100;
    }
  }
  @keyframes boxd {
    3%,
    20% {
      transform: translate3d(-435px, -50%, -460px) rotate3d(0, 1, 0, 50deg);
      z-index: 80;
    }
    23%,
    40% {
      transform: translate3d(235px, -50%, -460px) rotate3d(0, 1, 0, -50deg);
      z-index: 80;
    }
    43%,
    60% {
      transform: translate3d(55px, -50%, -110px) rotate3d(0, 1, 0, -45deg);
      z-index: 90;
    }
    63%,
    80% {
      transform: translate3d(-50%, -50%, 0) scale(1.5);
      z-index: 100;
    }
    83%,
    100% {
      transform: translate3d(-245px, -50%, -110px) rotate3d(0, 1, 0, 45deg);
      z-index: 90;
    }
  }
  @keyframes boxe {
    3%,
    20% {
      transform: translate3d(235px, -50%, -460px) rotate3d(0, 1, 0, -50deg);
      z-index: 80;
    }
    23%,
    40% {
      transform: translate3d(55px, -50%, -110px) rotate3d(0, 1, 0, -45deg);
      z-index: 90;
    }
    43%,
    60% {
      transform: translate3d(-50%, -50%, 0) scale(1.5);
      z-index: 100;
    }
    63%,
    80% {
      transform: translate3d(-245px, -50%, -110px) rotate3d(0, 1, 0, 45deg);
      z-index: 90;
    }
    83%,
    100% {
      transform: translate3d(-435px, -50%, -460px) rotate3d(0, 1, 0, 50deg);
      z-index: 80;
    }
  }

全てのコード

3パターン分のコードは量が多いのでこちらからダウンロード してください。

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

profile

にほんブログ村 教育ブログ プログラミング教育へ
にほんブログ村

パソコン好きなガオ

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

パソコン

パソコン

【CSS】transform:skewYで視線を下方向へ誘導する三角形をデザインする

パソコン

【javascript】イメージスライダー、画像をフワッと切り替え、ちょっと拡大させる

パソコン

【javascript】文字を円形の画像の周りに配置する方法

パソコン

【javascript】文字列を取得し、一文字ずつspanに挿入する方法

パソコン

【javascript】hタグを取得し、目次を自動生成する方法

javascript

CSS Tip集
javascript Tip集

カメラ

カメラ

【Nikon Z6Ⅱ vs Z7Ⅱ】メリットとデメリット 買うならどっち？

カメラ

初めてのミラーレス、キットレンズを買うべきでない理由

カメラ

【Nikon Z5】1年半使ってみてのレビュー、おススメポイント5つ

ブログ

ブログ

【松本城】ライトアップした夜桜&松本城

ブログ

【高遠城址公園】タカトオコヒガンザクラを見に行きました。ピンクが濃い！

ブログ

家庭菜園始めました。サニーレタスとリーフレタス