calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

CSSだけでOK！レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー

  • 作成：2017/08/28
  • 更新：2017/08/28
  • Web制作

CSSだけで動く「ズームインとズームアウトをフェードしながら交互に繰り返すCSSスライダー」です。

PR
IT/WEB業界への転職なら
Sponsored Link

作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示しています。CSSでみたい人は「VIEW COMPILED」を押してください。

参考にさせていただいたのは、cssだけで作るスライダー – PeonyQueenで作成されているスライダー。

上記のスライダーがとてもよく出来ていてCSSのアニメーションで時間差をつけてスライドを切り替え、フェードインを繰り返すようになっています。CSSなので読み込みや動作も早く扱いやすいです。

こちらを参考に、htmlのimg記述をなくし、フェードインとフェードアウトを繰り返すようにカスタマイズさせていただきました。

5枚の画像を切替えるバージョンです。htmlの記述はこれだけ。

html

<div class="slider_css">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

SCSS

@mixin bp {
  @media only screen and (max-width: 768px) {
    @content;
  }
}
.slider_css {
  height: 550px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      background-size: cover;
      width: 100%;
      height: 550px;
      position: absolute;
      top: 0;
      left: 0;
      animation-iteration-count: infinite;
      animation-duration: 40s;
      @for $value from 1 through 5 {
        &:nth-child(#{$value}) {
          background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal#{$value}.jpg");
          @if $value % 2 == 0 {
            //偶数
            animation-name: slider-zoomout;
          }
          @else {
            //奇数
            animation-name: slider-zoomin;
          }
          @if $value != 1 {
            //最初以外は透過
            opacity: 0;
          }
          animation-delay: #{($value*8-11)}s; //-3からスタートして、8づつ加算する
        }
      }
      img {
        width: 130%;
      }
    }
  }

  @include bp {
    height: 400px;
    ul {
      li {
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
}
// 5~8秒の間だけ透過解除
@keyframes slider-zoomin {
  0% {
    opacity: 0;
    transform: scale(1.0);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes slider-zoomout {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}

画像はCSS背景に設定し、偶数と奇数の画像によって、ズームインとズームアウトのアニメーションを割り当てます。

ズームインだけ適用したい場合は、animation-nameの箇所を、どちらもslider-zoominにしてください。ズームアウトの場合はslider-zoomoutですね。

1枚8秒(5枚の画像×8秒)で計算するので、アニメーション周期（animation-duration）は40秒で設定します。

1枚目以外は透過させ、表示から開始させるので-3秒からスタートし8秒づつ加算してアニメーション開始時間をずらします（animation-delay）。

◯枚目 1 2 3 4 5 6
開始時間 -3 5 13 21 29 37

※1枚目は-3秒から開始し、2枚目は8秒後の5秒から開始するという意味。

アニメーションは40秒間のうち5~8秒の間だけ透過解除したいので12.5%（5×100/40=12.5）と20%（8×100/40=20）にopacity:1を設定。秒数をdurationで割ります。

分かりにくいので表を作りました。以下の表だと、5枚の時は12.5~20%、4枚の時は15.63~25%にopacity:1を指定すればよいということになります。

1枚8秒で設定した時の計算表

枚数 duration 5秒 8秒
3 24s 20.83% 33.33%
4 32s 15.63% 25.00%
5 40s 12.50% 20.00%
6 48s 10.42% 16.67%

※アニメーション周期や画像枚数を変更する場合は、このあたりを再計算する必要が出てきますが、仕組みが分かれば比較的使いやすいのではないでしょうか。以上、軽量・高速・簡単記述のCSSスライダーでした。

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL：西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。