tro-suke blog

Homepage template is free, and the WordPress theme is free, too.
ホームページ制作/HPテンプレート無料、WordPressテーマも無料!!
blog top > CSS、PHP 備忘録 > HTML5・CSS3関連 > CSS3 だけでスライドショー

CSS3 だけでスライドショー

CSS3だけでスライドショー

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でのみ表示できます。

 

“CSS3 だけでスライドショー” への1件のコメント

  1. […] を見ながら説明して行きましょう。今回はカスタムテキストの部分を分かりやすく横スライドにさせています。 (「css3 animation」については、前回説明していますので今回は省きます。) […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲ page top