JavaScriptとCSSで画像をふわっと切り替えるスライドショーを作る
以前、「JavaScriptでスライドショーみたいな画像切替え（jQueryなし）」と題してスライドショーは作ったのですが、CSSは使っておらず、フェードイン／アウトのようなトランジション処理も入っていなかったため、見栄えがいまいちかなぁーと思っておりました。
なので、今回はCSSも使って、ふわっと写真や画像を自動的に切替えるサンプルです。もちろん、今回もjQueryは不要。
実行例
あれこれ説明するより、実行結果を見たほうがわかりやすいと思うので、まずは実行例。
表示時間：
13枚の写真が次々とふわっと現れてふわっと消えていきます。
HTML部分の解説
<div class="slide">
<img src="[画像01]" />
<img src="[画像02]" />
<img src="[画像03]" />
<img src="[画像04]" />
<img src="[画像05]" />
<img src="[画像06]" />
<img src="[画像07]" />
<img src="[画像08]" />
<img src="[画像09]" />
<img src="[画像10]" />
<img src="[画像11]" />
<img src="[画像12]" />
<img src="[画像13]" />
</div>
<p>
表示時間：<input type="range" id="slide_speed" value="2000" min="100" max="10000">
</p>特に難しいところもないと思いますが、クラス名に"slide"を指定したdivタグで表示したい画像を囲っているだけです。
また、一応スライドショーの切り替え速度をその場で変更できるように、input要素のtype="range"でレンジバー（スライドバー）を表示しています。
実際には速度ではなく、setTimeout関数に渡す値なので、値が大きければ大きいほどスライドの切り替え時間が長く（遅く）なります。
逆にスライドバーを右に寄せるほど速度を上げたい場合はsetTimeout関数に渡す値を「最大値－現在値」にするか、CSSで表示を反転させるのも良いでしょう。これについては後述します。
CSS部分の解説
<style>
.slide {
position:relative;
height:400px;
}
.slide img {
position:absolute;
opacity:0;
transition:all 1s ease-in-out;
height:100%;
object-fit:contain;
}
</style>シンプルかつ短いですが、ここがキモの部分です。
まず、全体を囲っているslideクラスですが、position:relative;として基準点とすることが必須。
前回のスライドショーの例ではdisplay:none;とdisplay:block;を切り替えることで、画像の表示／非表示をコントロールしていましたが、それではtransitionのアニメーションが発生しません。そのため今回はopacity（不透明度）を使うことでスライドの切り替えを実現しています。
しかし、要素としては存在したまま透明度だけが切り替わるため、透明な画像を13枚並べたとしたら、13枚分の空白が出来てしまうのでそれは困る。透明人間は見えなくても物理的にはぶつかってしまうのと同じです。…………例がおかしいかｗ
透明人間は置いておくとしてｗ ともかく、div.slideをrelativeで基準点とし、その中のimgはabsoluteで基準点に配置。つまり、13枚の画像が同じ場所に重なった状態にしなくてはなりません。絵描きさんにはレイヤーと言えば一発で伝わりますよね。たぶん。
そして、div.slideがrelative指定になっているため、高さの指定も必須。height:400px;を指定し、スライドショーの高さを決めています。
もちろん、画像側ではobject-fit:contain;を使うことで、div.slide内に収まるように、いいかんじにリサイズされます。ちなみに最近のモダンブラウザなら問題ありませんが、IE11ではobject-fitが効かないため、どうしてもIE11にも対応したい場合は下記の記事も参照してみてください。
それから前述したスライドの表示速度を変えるレンジバーについてですが、現状では右に寄せるほど表示が遅くなりますが、逆の動作にしたい場合はCSSで反転させる方法もあります。
具体的にはこんな感じ。
#slide_speed {
transform:rotateY(180deg);
}transform:rotateYで180度回転させるんです。すごく強引ですが、以前は見た目もそのままなので意外と使いみちがありました。
実際、JavaScriptでコマ撮りムービー風の表示をする記事で使っています。
ただ、最近のChromeのアップデートでレンジバーの見た目が変わって色が付くようになったため、多少違和感が出るようになってしまいました。残念。
JavaScript部分の解説
<script>
window.addEventListener('load', function () {
viewSlide('.slide img');
});
function viewSlide(className, slideNo = -1)
{
let imgArray = document.querySelectorAll(className);
if (slideNo >= 0) {
//初回以外は現在のスライドを消す
imgArray[slideNo].style.opacity = 0;
}
slideNo++;
if (slideNo >= imgArray.length) {
slideNo = 0; //次のスライドがなければ最初のスライドへ戻る
}
imgArray[slideNo].style.opacity = 1;
let msec = document.getElementById('slide_speed').value;
setTimeout(function(){viewSlide(className, slideNo);}, msec);
}
</script>JavaScriptの部分は前回のスライドショーの例から変更した点は以下のとおり。
- 画像切替をstyle.displayからstyle.opacityへ変更。
- window.onload後にスライドショーを開始するように変更。
- 初回実行時にグローバル変数へ画像要素を格納していたのを廃止し、毎回querySelectorAllで取得するように変更。
- その場でスライドショーの表示時間を変更できるようslide_speed要素を参照するように変更。
1が重要な部分ですが、CSSの項目で解説したとおり、display:block/noneの切り替えではアニメーションが発生しないため、これをopacity:0/1の切り替えに変更しています。
2についてもそれなりに大事で、1枚目の画像をパッと表示しても良いのなら、いきなりviewSlide関数を呼び出しても良いのですが、1枚目からふわっとアニメーションさせたいのなら必須。ちゃんとページのロードが終わった後にopacityの変更をしないとアニメーションが発生しないのです。（1枚目だけね）
3はオマケ。グローバル変数って便利ですけど、あちこちで使っていると変数名かぶったりして予期せぬバグの温床になるため、なるべく使いたくないなぁーと思って。今回は毎回querySelectorAllを実行することでグローバル変数を不要としました。
4は更にどうでもいいオマケ。スライドショーの表示スピードをリアルタイムで変えたいなーと思って付けただけです。
ちなみにスライドバーの右と左の動作を逆転（右に行くほど速く）したい場合は下記のとおり、「最大値－現在値」にすれば良いでしょう。
let msec = document.getElementById('slide_speed').max - document.getElementById('slide_speed').value;まとめ
「JavaScriptでスライドショーみたいな画像切替え（jQueryなし）」という記事は投稿済でしたが、もう少しイケてるスライドショーにしたいなぁ～と思って、CSSのtransitionのease-in-outを使ってみました。
ちょっとサンプル写真のチョイスがよくないかな？ 似たような写真の連続だから、あまりふわっと現れてふわっと消えているように感じないかも知れません。
今回伝えたかったのはJavaScriptとCSSを組み合わせたときに、「いつ」アニメーションが動作するのか、という点です。
setTimeoutやonclickでも良いですけど、JavaScriptでCSSのプロパティを変更するケースというのはよくあると思います。特にdisplayプロパティをいじることで要素の表示／非表示の切り替えをする方法は最も使われるパターンと言っても過言ではないでしょう。
しかし、それではCSSのtransitionが発生しません。ではいつ発生するのかというとopacityの変更時。いえ、厳密には他にも発生するタイミングはあるのですが、今回の例では一番わかりやすいかな、と。
そんなわけで、displayプロパティをいじらずに、opacityで画像の表示／非表示を切り替え、スライドショーを作る例を記事にしてみました。
単純な仕組みではありますが、どこかの誰かのお役に立てれば幸いです。
