今回は、画像をスムーズに切り替える方法をご紹介します。使うのは、簡単に使えるJavaScriptライブラリ「turntable.js」です。このライブラリを使うことで、画像をまるでアニメーションのように表示することができます。
この記事では、初心者でも分かりやすいように、具体的なコードと共に説明していきます。ぜひ最後まで読んで、あなたのプロジェクトに役立ててください！
Turntable.jsの魅力
Turntable.jsは、マウスのスクロールやカーソルの移動に応じて画像を切り替えることができるライブラリです。特に以下の点が魅力です：
- インタラクティブな表現：ユーザーの操作に応じて画像が変化し、視覚的な楽しさを提供します。
- 簡単な実装：基本的なHTML、CSS、JavaScriptの知識があれば、すぐに導入できます。
- 柔軟な設定：x軸、y軸、スクロールに対応しているため、さまざまな演出が可能です。
CSSの記述
まずは、画像を表示するエリアのCSSを設定しましょう。以下に基本的なCSSコードを紹介します。
<style>
body{
padding: 0;
margin: 0;
text-align: center;
font-size: 16px;
}
h1{
font-size:20px;
line-height:1.6em;
text-align:center;
padding: 15px 0 25px 0;
}
.turntable {
margin: 0px auto;
width: 500px;
}
.turntable ul {
padding: 0px;
margin: 0px;
}
.turntable ul li {
list-style-type: none;
display: none;
}
.turntable ul li img {
width: 100%;
}
.turntable ul li.active {
display: block;
}
</style>
このCSSは、画像をリスト形式で表示するためのスタイル設定です。activeクラスが付いたli要素だけが表示され、他の要素は非表示になります。
HTMLの設定
次に、HTMLで画像を配置する部分を設定します。以下のコードを参考にしてください。
複数画像を切替表示するエリア（#myTurntable）内のliタグに7枚の画像（1～7.jpg）を用意します。
<h1>turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示します。<br>以下の画像上でマウスカーソルを左右に移動させてみて下さい。</h1>
<div id="myTurntable" class="turntable">
<ul>
<li data-img-src="1.jpg"></li>
<li data-img-src="2.jpg"></li>
<li data-img-src="3.jpg"></li>
<li data-img-src="4.jpg"></li>
<li data-img-src="5.jpg"></li>
<li data-img-src="6.jpg"></li>
<li data-img-src="7.jpg"></li>
</ul>
</div>
ここでは、#myTurntableというIDを持つdiv要素内に画像のリストを配置します。data-img-src属性に画像ファイルのパスを指定します。
JavaScriptの設定
最後に、JavaScriptでTurntable.jsを動かします。以下のコードをコピーして使ってみましょう。
jquery.min.js（v2.2.4）、turntable.jsファイルを読み込みます。$(‘切替表示するエリア’).turntable({オプション})を記述します。axisには’x, y, or scroll’の様にx軸、y軸、ページスクロールで切替るのかを指定します。
<script type="text/javascript" src="jquery.min.js"></script>
<script src="turntable.js"></script>
<script type="text/javascript">
$('#myTurntable').turntable({
axis: 'x',
reverse: true
});
</script>
ここでは、jQueryとTurntable.jsを読み込み、turntableメソッドを呼び出しています。axisオプションで切り替え軸を指定し、reverseオプションで逆方向の設定をしています。
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するデモページ
実際の動作を確認したい方は、以下のデモページをチェックしてみてください。インタラクティブな画像切り替えの魅力が一目で分かります。
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するデモページ
ソース元：Turntable.js : A Responsive JQuery Slider
Turntable.js : A Responsive JQuery Slider
まとめ
今回の記事では、Turntable.jsを使ったインタラクティブな画像切り替え方法を紹介しました。このライブラリを使うことで、ウェブサイトに動的で魅力的なコンテンツを簡単に追加することができます。ぜひ、自分のプロジェクトに取り入れて、ユーザーに新しい体験を提供してみてください！
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
