Saetl.net

Simple And Easy TempLate

CSS-only responsive sliderの使い方

  1. 下記ページの ｢DOWNLOAD｣ よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル（サンプルではindex.html）にコードを記述。
    ＜パスは上記ファイル構成の場合なので環境にあわせて変更＞
    ・head部分にcssファイルを読み込ませるためのコードを記述。 
    <head>
<!--ダウンロードしたファイル-->
<link rel="stylesheet" type="text/css" href="css/screen.css" />
</head>

    サンプルのcssコード（サンプルのcssは改変しています）

    /*ページ設定部分（style.cssなどで設定していれば削除する）*/
body, ul, li, h1, h2, span {
	margin: 0;
	padding: 0;
}
body {
	font: 75% Verdana, Arial;
	color: #333;
	background: #fff
}
#container {
	width: 90%;
	min-width: 300px;
	max-width: 1200px;
	margin: 50px auto;
}
/*ここまでページ設定部分*/


/*ここからSexy Tooltipsの設定*/

/*----------------------header-------------------------------*/
header {
	text-align: center;
	position: relative;
	background-image: url(../images/slider-horizontal.jpg);
	background-repeat: repeat-x;
	background-position: 0 bottom;
	background-size: 400%;
	padding-bottom: 32.5%;
	-webkit-animation: h_slide 24s ease-out infinite;
	-moz-animation: h_slide 24s ease-out infinite;
	animation: h_slide 24s ease-out infinite;
}
 @-webkit-keyframes h_slide {
 0% {
 background-position: 0% bottom;
}
 20% {
 background-position: 0% bottom;
}
 25% {
 background-position: 33.33333% bottom;
}
 45% {
 background-position: 33.33333% bottom;
}
 50% {
 background-position: 66.66667% bottom;
}
 70% {
 background-position: 66.66667% bottom;
}
 75% {
 background-position: 100% bottom;
}
 95% {
 background-position: 100% bottom;
}
 100% {
 background-position: 133.33% bottom;
}
}
 @-moz-keyframes h_slide {
 0% {
 background-position: 0% bottom;
}
 20% {
 background-position: 0% bottom;
}
 25% {
 background-position: 33.33333% bottom;
}
 45% {
 background-position: 33.33333% bottom;
}
 50% {
 background-position: 66.66667% bottom;
}
 70% {
 background-position: 66.66667% bottom;
}
 75% {
 background-position: 100% bottom;
}
 95% {
 background-position: 100% bottom;
}
 100% {
 background-position: 133.33% bottom;
}
}
 @keyframes h_slide {
 0% {
 background-position: 0% bottom;
}
 20% {
 background-position: 0% bottom;
}
 25% {
 background-position: 33.33333% bottom;
}
 45% {
 background-position: 33.33333% bottom;
}
 50% {
 background-position: 66.66667% bottom;
}
 70% {
 background-position: 66.66667% bottom;
}
 75% {
 background-position: 100% bottom;
}
 95% {
 background-position: 100% bottom;
}
 100% {
 background-position: 133.33% bottom;
}
}

    サンプルのhtmlコード

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>CSS-only responsive slider</title>
<link rel="stylesheet" type="text/css" href="css/screen.css" />
</head>

<body>
<div id="container">
  <header> </header>
</div>

</body>
</html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル