▲TOPへ戻る

【CSS】イメージスライダー、アニメーションをアレンジしていろいろ表現してみる

前回、以下のイメージスライダー作り方を紹介しました。今回は、CSSを変えていろいろ表現してみたいと思います。

キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス

参考

基本のHTMLとCSSは以下を参照してください。

js
【javascript】イメージスライダー(image slider)の作り方

CSS

左へスライド

キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス
  .slider .images img.active {
    animation: slider 3s ease-in-out infinite;
    z-index: 100;
  }
  @keyframes slider {
    50%,100% {
      transform: translateX(-100%);  /* ここがポイント */
    }
  } 

右へスライド

キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス
  .slider .images img.active {
    animation: slider 3s ease-in-out infinite;
    z-index: 100;
  }
  @keyframes slider {
    50%,100% {
      transform: translateX(100%);  /* ここがポイント */
    }
  } 

回転して縮小、消える

キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス
  .slider3 .images img.active {
    animation: slider3 3s ease-in-out infinite;
    z-index: 100;
  }
  @keyframes slider3 {
    0% {
      transform: scale(1.2);
    }
    30%,100%{
      transform: scale(0) rotate(720deg);  /* ここがポイント */
    }
  }  

skewを使い、縮小、消える

キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス キャンパス
  .slider4 .images img.active {
    animation: slider4 3s ease-in-out infinite;
    z-index: 100;
  }
  @keyframes slider4 {
    0% {
      transform: scale(1.2);
    }
    30%,100%{
      transform: scale(0) skew(90deg);  /* ここがポイント */
    }
  }  

CSSをアレンジして、もっといろいろ表現を試してみましょう。

profile

パソコン好きなガオ

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

パソコン

javascript

カメラ

ブログ