HOME > 開発者向けBLOG > Webデザイン >  オートで横にスライド(一時停止、再生)

Technology Note 開発者向けBLOG

Webデザイン

オートで横にスライド(一時停止、再生)

こんにちは、ゼノフィ渡部です。

animationとkeyframesで画像を横にオートスライドさせ、ボタンクリックで一時停止と再生を実行する方法をご紹介いたします。

使用している画像は4枚になります。

画像1

画像2

画像3

画像4

まず、2行目の「div.slide_area」でスライドエリア全体を中央に表示します。次に11行目の「div.slide_mask」で指定した幅と高さを決めて、現在表示する画像以外のものを非表示にします。

19行目「ul.photo」の「width: 2000px;」は画像4枚の幅が500pxなので2000pxとしています。ここは画像の枚数の最大値よりも大きければ2500pxでも3000pxでも問題ありません。

26行目の「-webkit-animation: ‘AutoSlidePhoto’ 10s infinite;」では「AutoSlidePhoto」キーフレーム名を決定し、アニメーションのスライドにかかる時間を10s、画像がスライドする繰り返しを無限に設定しています。

30行目の「ul.photo li」で画像を横並びにし、37行目の「ul.photo figure」で幅と高さを指定し、画像が小さい場合でも画像が垂直中央に表示されるようにします。47行目の「ul.photo img」では、画像の最大の幅と高さを指定し、「width: 500px;」、「height: 375px;」以上の画像が入ってきても、スライド内に画像を収めるようにしています。

53行目の「@-webkit-keyframes AutoSlidePhoto」では「AutoSlidePhoto」としてanimationで決定したキーフレーム名を記述しています。このキーフレーム名を指定にすることによりアニメーションする要素とプロパティを決めています。0%～100%は「animation」で決めた合計の時間に対するパーセントで指定します。ここでは左に画像をスライドさせるので、leftを指定しています。

94行目の「#paused:target ul.photo」では、a要素のtarget属性と「animation-play-state: paused;」のプロパティで一時停止を行っています。

100行目の「#running:target ul.photo」では、a要素のtarget属性と「animation-play-state: running;」のプロパティで再生を行っています。

「animation-play-state」現在、削除検討中のプロパティのようなので、将来的になくなる可能性があります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

/* スライドエリア全体を中央に表示 */
div.slide_area {
  width: 500px;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  background: #4F4F4F;
}
 
/* 指定した幅と高さ以外は非表示 */
div.slide_mask {
  position: relative;
  width: 500px;
  height: 375px;
  overflow: hidden;
}
 
/* 画像の枚数に合わせた最大の幅を指定 */
ul.photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px;
  height: 375px;
  animation: 'AutoSlidePhoto' 10s infinite; /* 将来用 */
  -webkit-animation: 'AutoSlidePhoto' 10s infinite; /* アニメーションのスライドにかかる時間を10sで指定し、繰り返しを無限に設定 */
}
 
/* 画像を横並びに */
ul.photo li {
  position: relative;
  float: left;
  width: 500px;
  height: 375px;
}
 
/* 画像を垂直・水平に表示 */
ul.photo figure {
  width: 500px;
  height: 375px;
  display: table-cell;    /* テーブル構造を表現 */
  vertical-align: middle; /* 垂直に表示 */
  text-align: center;     /* 真ん中に表示 */
}
 
/* 画像の最大の幅と高さ */
ul.photo img {
  max-width: 500px;
  max-height: 375px;
}
 
/* キーフレ－ム */
@-webkit-keyframes AutoSlidePhoto {
 
  0% {
    left: 0;
  }
 
  20% {
    left: 0;
  }
 
  25% {
    left: -500px;
  }
 
  45% {
    left: -500px;
  }
 
  50% {
    left: -1000px;
  }
 
  70% {
    left: -1000px;
  }
 
  75% {
    left: -1500px;
  }
 
  95% {
    left: -1500px;
  }
 
  100% {
    left: 0;
  }
 
}
 
/* 一時停止 */
#paused:target ul.photo {
  animation-play-state: paused; /* 将来用 */
  -webkit-animation-play-state: paused;
}
 
/* 再生 */
#running:target ul.photo {
  animation-play-state: running; /* 将来用 */
  -webkit-animation-play-state: running;
}

2行目と4行目の「id="paused"」、「id="running"」を一時停止と再生のトリガーとしています。47行目と54行目の「#paused」、「#playing」は2行目と4行目の「id="paused"」、「id="running"」に対応しており、「#paused」のa要素をクリックすると一時停止、「#playing」のa要素をクリックすると再生されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!-- スライドエリア -->
<div id="paused" class="slide_area">
    <!-- スライドマスク -->
    <div id="running" class="slide_mask">
        <ul class="photo">
            <li id="photo01">
                <figure>
                    <img src="img01.gif" width="500" height="375" alt="画像1" />
                    <figcaption>
                        画像1キャプション
                    </figcaption>
                </figure>
            </li>
            <li id="photo02">
                <figure>
                    <img src="img02.gif" width="250" height="150" alt="画像2" />
                    <figcaption>
                        画像2キャプション
                    </figcaption>
                </figure>
            </li>
            <li id="photo03">
                <figure>
                    <img src="img03.gif" width="500" height="375" alt="画像3" />
                    <figcaption>
                        画像3キャプション
                    </figcaption>
                </figure>
            </li>
            <li id="photo04">
                <figure>
                    <img src="img04.gif" width="500" height="375" alt="画像4" />
                    <figcaption>
                        画像4キャプション
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
    <!-- /スライドマスク -->
</div>
<!-- /スライドエリア -->
 
<!-- ボタン -->
<ul class="btn">
    <li>
        <a href="#paused" class="puased">
            <span>
                一時停止
            </span>
        </a>
    </li>
    <li>
        <a href="#playing" class="playing">
            <span>
                再生
            </span>
        </a>
    </li>
</ul>
<!-- /ボタン -->

サンプルはGoogle ChromeとSafariブラウザに対応しています。「■」ボタンをクリックすると一時停止、右の三角ボタンをクリックすると再生されます。

画像2は垂直中央に画像が表示されることを確認するため、幅と高さを小さくしています。小さい画像でも垂直中央に表示されていることが確認できます。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

h1 {
  text-align:  center;
}
 
ul,figure,figcaption {
  margin: 0;
  padding: 0;
}
 
ul {
  list-style-type: none;
}
 
/* スライドエリア全体を中央に表示 */
div.slide_area {
  width: 500px;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  background: #4F4F4F;
}
 
/* 指定した幅と高さ以外は非表示 */
div.slide_mask {
  position: relative;
  width: 500px;
  height: 375px;
  overflow: hidden;
}
 
/* 画像の枚数に合わせた最大の幅を指定 */
ul.photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px;
  height: 375px;
  animation: 'AutoSlidePhoto' 10s infinite; /* 将来用 */
  -webkit-animation: 'AutoSlidePhoto' 10s infinite; /* アニメーションのスライドにかかる時間を10sで指定し、繰り返しを無限に設定 */
}
 
/* 画像を横並びに */
ul.photo li {
  position: relative;
  float: left;
  width: 500px;
  height: 375px;
}
 
/* 画像を垂直・水平に表示 */
ul.photo figure {
  width: 500px;
  height: 375px;
  display: table-cell;    /* テーブル構造を表現 */
  vertical-align: middle; /* 垂直に表示 */
  text-align: center;     /* 真ん中に表示 */
}
 
/* 画像の最大の幅と高さ */
ul.photo img {
  max-width: 500px;
  max-height: 375px;
}
 
/* キーフレ－ム */
@-webkit-keyframes AutoSlidePhoto {
 
  0% {
    left: 0;
  }
 
  20% {
    left: 0;
  }
 
  25% {
    left: -500px;
  }
 
  45% {
    left: -500px;
  }
 
  50% {
    left: -1000px;
  }
 
  70% {
    left: -1000px;
  }
 
  75% {
    left: -1500px;
  }
 
  95% {
    left: -1500px;
  }
 
  100% {
    left: 0;
  }
 
}
 
/* キャプション */
ul.photo figcaption {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 480px;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  color: #fff;
  font-weight: bold;
  background: #333;
  opacity: 0.5;
}
 
/* 一時停止 */
#paused:target ul.photo {
  animation-play-state: paused; /* 将来用 */
  -webkit-animation-play-state: paused;
}
 
/* 再生 */
#running:target ul.photo {
  animation-play-state: running; /* 将来用 */
  -webkit-animation-play-state: running;
}
 
/* ボタン */
ul.btn {
  width: 520px;
  margin: 20px auto;
}
 
ul.btn li {
  float: left;
  margin: 0 15px 0 0;
}
 
ul.btn a {
  display: block;
  width: 26px;
  height: 26px;
  text-decoration: none;
}
 
ul.btn a.puased {
  background: #4F4F4F;
}
 
ul.btn a.playing {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 0px solid transparent;
  border-left: 26px solid #4F4F4F ;
  border-bottom: 13px solid transparent;
}
 
ul.btn span {
  display: none;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!-- スライドエリア -->
<div id="paused" class="slide_area">
    <!-- スライドマスク -->
    <div id="running" class="slide_mask">
        <ul class="photo">
            <li id="photo01">
                <figure>
                    <img src="img01.gif" width="500" height="375" alt="画像1" />
                    <figcaption>
                        画像1キャプション
                    </figcaption>
                </figure>
            </li>
            <li id="photo02">
                <figure>
                    <img src="img02.gif" width="250" height="150" alt="画像2" />
                    <figcaption>
                        画像2キャプション
                    </figcaption>
                </figure>
            </li>
            <li id="photo03">
                <figure>
                    <img src="img03.gif" width="500" height="375" alt="画像3" />
                    <figcaption>
                        画像3キャプション
                    </figcaption>
                </figure>
            </li>
            <li id="photo04">
                <figure>
                    <img src="img04.gif" width="500" height="375" alt="画像4" />
                    <figcaption>
                        画像4キャプション
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
    <!-- /スライドマスク -->
</div>
<!-- /スライドエリア -->
 
<!-- ボタン -->
<ul class="btn">
    <li>
        <a href="#paused" class="puased">
            <span>
                一時停止
            </span>
        </a>
    </li>
    <li>
        <a href="#playing" class="playing">
            <span>
                再生
            </span>
        </a>
    </li>
</ul>
<!-- /ボタン -->

<

>

PAGETOP