1,408 views
この記事は最終更新から 1379日 が経過しています。
1. やりたいこと
CSSと JavaScriptを組み合わせて（＝楽をして）スライドショーを実現したい。
2. やってみる
0) 実装方針
以下の方針でそれぞれに処理を記述する。
CSS : フェードアウトやスライドなどのアニメーション制御を記述する。
JavaScript : 一定周期でのクラスの追加・削除を記述する。
1) フェードアウト
style_1.css
ul{
position: relative;
overflow: hidden;
}
ul li.slide{
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0;
}
ul li.dummy{ /* 画像の高さを得るためのダミー表示物 */
opacity: 0;
}
.anim{
animation-name: kf_anim;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes kf_anim {
0%{ opacity: 1; }
100%{ opacity: 0; }
}
script.css
$(function(){
var to_time = 4000;
var anim_time = 2000;
var ary_li = $('ul li.slide');
var max_idx = ary_li.length - 1;
var act_idx = 0;
// タイムアウト時のコールバック関数
function callbackTOAnim(){
anim_img();
};
// アニメーション制御関数
function anim_img(){
// 消去する画像にアニメーションクラスを追加
ary_li.eq(act_idx).css('z-index','1');
ary_li.eq(act_idx).addClass('anim');
// 次に表示する画像の番号を決定
act_idx = act_idx + 1;
if(act_idx > max_idx){
act_idx = 0;
}
// 次に表示する画像を可視化
ary_li.eq(act_idx).css('z-index','0');
ary_li.eq(act_idx).css('opacity','1');
ary_li.eq(act_idx).removeClass('anim');
// 表示
setTimeout(callbackTOAnim, to_time);
};
// 以下、ページ表示の初回だけ実行
ary_li.eq(act_idx).css('z-index','1');
ary_li.eq(act_idx).css('opacity','1');
// 表示
setTimeout(callbackTOAnim, to_time - anim_time);
});
demo1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00094 demo1</title>
<link rel="stylesheet" href="./style_1.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./script.js"></script>
</head>
<body>
<ul>
<li class="dummy"><img src="./IMG_1442.JPG"></li>
<li class="slide"><img src="./IMG_1442.JPG"></li>
<li class="slide"><img src="./IMG_1456.JPG"></li>
<li class="slide"><img src="./IMG_1467.JPG"></li>
<li class="slide"><img src="./IMG_1494.JPG"></li>
<li class="slide"><img src="./IMG_1509.JPG"></li>
</ul>
</body>
</html>
http://www.dogrow.net/hp/sample/00094/demo1.html
2) スライド
上記の「1) フェードアウト」との差は @keyframes の定義のみ。
@keyframes kf_anim {
0%{ left: 0; }
100%{ left: -100%; }
}
http://www.dogrow.net/hp/sample/00094/demo2.html
3. 所感
・すべてを JavaScriptで書くよりもだいぶ楽だなぁと思うが…