CSS3のanimationを使ったWebKit系対応の画像スライドの作り方

CSS3で追加されたanimationを使って何かしてみたかったので、画像を次々入れ替わって表示されるスライドを作ってみました。

まだまだ実用的ではないので、今回ChromeやSafariのWebKit系のみになりますのでご了承ください。

img-slide.png

こういうのを何と呼べばいいのかよく分からなかったので、皆さんがイメージしているものと違ったらごめんなさい。

今回は別サーバーにサンプルを用意しました。

HTMLは非常にシンプルです。

<div id="img-slide">
  <a href="#"><img src="img1.png" id="img1" /></a>
  <a href="#"><img src="img2.png" id="img2" /></a>
  <a href="#"><img src="img3.png" id="img3" /></a>
  <a href="#"><img src="img4.png" id="img4" /></a>
</div>

こういうのはリストで並べたほうがスマートなのかなと思いつつ、とりあえず画像を順に置いただけにしています。

続いてCSS。背景に黒めの画像を使っているので、画像のbox-shadowを強めに付けています。背景が白だときつすぎるかもしれないです。

#img-slide {
  width: 980px;
  margin:50px auto;
  position: relative;
}
#img-slide a img {
  position: absolute;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.7), 20px 10px 30px rgba(0,0,0,0.7), -20px 10px 30px rgba(0,0,0,0.7);
  border: 0;
}
#img1 {
  -webkit-animation: 'slide' 16s ease 0s infinite normal
}
#img2 {
  -webkit-animation: 'slide' 16s ease -4s infinite normal
}
#img3 {
  -webkit-animation: 'slide' 16s ease -8s infinite normal
}
#img4 {
  -webkit-animation: 'slide' 16s ease -12s infinite normal
}
@-webkit-keyframes 'slide' {
  0% { top: 20px; left: 200px; width: 580px; z-index: 4; }
 20% { top: 20px; left: 200px; width: 580px; z-index: 4; }
 25% { top: 50px; left: 480px; width: 500px; z-index: 3; }
 45% { top: 50px; left: 480px; width: 500px; z-index: 3; }
 50% { top: 50px; left: 200px; width: 500px; z-index: 1; }
 70% { top: 50px; left: 200px; width: 500px; z-index: 1; }
 75% { top: 50px; left:   0px; width: 500px; z-index: 3; }
 95% { top: 50px; left:   0px; width: 500px; z-index: 3; }
100% { top: 20px; left: 200px; width: 580px; z-index: 4; }
}

animation以外は特に問題ないかなと思います。で、そのanimationを簡単に説明してみます。

css3-animation.png

個別に指定するプロパティもありますが、今回はまとめて指定しています。けど、まとめて指定できるのはWebKit系のみです。あと、現時点ではベンダープレフィックス「-webkit-」が必要です。

これだけだと「slide」というアニメーションの内容が分からないので、別でその内容を指定します。

@-webkit-keyframes 'slide' {
  0% { top: 20px; left: 200px; width: 580px; z-index: 4; }  /*真ん中*/
 20% { top: 20px; left: 200px; width: 580px; z-index: 4; }  /*真ん中*/
 25% { top: 50px; left: 480px; width: 500px; z-index: 3; }  /*右側*/
 45% { top: 50px; left: 480px; width: 500px; z-index: 3; }  /*右側*/
 50% { top: 50px; left: 200px; width: 500px; z-index: 1; }  /*裏側*/
 70% { top: 50px; left: 200px; width: 500px; z-index: 1; }  /*裏側*/
 75% { top: 50px; left:   0px; width: 500px; z-index: 3; }  /*左側*/
 95% { top: 50px; left:   0px; width: 500px; z-index: 3; }  /*左側*/
100% { top: 20px; left: 200px; width: 580px; z-index: 4; }  /*真ん中*/
}

0%から100%までの動きを順に指定し、それがアニメーション名「slide」ということになります。今回のサンプルの場合、これを16秒かけて一周します。

ということで簡単に説明してみました。WebKit系のみということでまだまだ実用的ではありませんがお役に立てばと思います。

とはいうものの、オンマウス時の動きはこだわれそうですし、画像も4つしか使えないですし、まだまだ改良の余地はたくさんありますので今後も勉強していきたいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加