CSS3 だけでスライドショー
Category : CSS、PHP 備忘録, HTML5・CSS3関連
スライドショーといえば「jQuery」を使った、かっこいいスライダーがたくさんありますよね。ですが今回はcss3の勉強もかねて、css3だけでスライドショーを作ってみました。
以前でしたら、Flashで作成すれば一番手っ取り早かったのですが、スマートフォンなどの普及に伴い、Flash非対応のデバイス向けにjQueryで作成することが多くなってきました。もちろんそれはそれでいいんですけど、css3だけでもクールなスライドショーは作れるんです。作成したスライドショーは、とても滑らかなでスライド間の変化はフェイド効果を使用しておりきれいな仕上りです。
css3 animation のプロパティ
/* css3 animation */ animation-name: anim_titles; /* キーフレームの名称を指定 */ animation-duration: 30.0s; /* アニメーションの再生時間を指定 */ animation-timing-function: linear; /* イージングの指定 */ animation-iteration-count: infinite; /* 再生回数を指定 */ animation-direction: normal; /* 偶数回目を逆再生にするかの指定 */ animation-delay: 0; /* 再生開始までの遅延時間を指定 */ animation-play-state: running; /* 再生中か一時停止かを指定 */ animation-fill-mode: forwards; /* 再生前後の表示を指定 */
htmlを作成するにあたり特別なことはありません。ただ基本的な<ul>-<li>リストを使うだけで、ここが一番のポイントです。それぞれのスライドにはカスタムなテキストを割り当てることができるから、SEO対策にも効果的なはずです。
スライドショーのページは、Firefox, Google Chrome, Safari, IE10でのみ表示できます。
Date : 2013年05月20日 | Comments : 0
[…] を見ながら説明して行きましょう。今回はカスタムテキストの部分を分かりやすく横スライドにさせています。 (「css3 animation」については、前回説明していますので今回は省きます。) […]