【three.js】おしゃれなスライダーWebGL Distortion Sliderの使い方とサンプル

今回は切り替え時のアニメーションにWebGLを使い、グラフィック表現を豊かにしたスライダーのサンプルを非プログラマー的思考で解説します。

WebGLとはウェブブラウザで3Dグラフィックスコンテンツの表示を可能とさせる標準仕様になります。

代表的なライブラリにthree.jsがあります。
当サンプルでも画像の切り替わり時のグラフィックにthree.jsを使用してのスライダーになります。

必要ファイルの読み込み
HTMLの記述
WebGL Distortion Sliderを自動スライドさせる
まとめ

必要ファイルの読み込み

参考サイト
WebGL Distortion Slider

上記サイトを参考にHTML、CSS、JSをコピーします。
cssはwebgl_slider.css、jsはwebgl_slider.jsというファイルにまとめて読み込みます。

上記以外にthree.js、imagesloaded.pkgd.js、imagesloaded.pkgd.jsとindex.htmlページに記載されているcssもstyle.cssとし、読み込みます。

jsはcdnで読み込んでいます。

<link href="css/webgl_slider.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="js/webgl_slider.js"></script>

HTMLの記述

HTML側は以下のように記述しました。

スライドするタイトルテキストにspan data-slide-title=”0″~span data-slide-title=”4″と属性を追加し、画像はimg/01.jpg~img/04.jpgとします。

	<div id="slider">
		<div class="slider-inner">
			<div id="slider-content">
				<div class="meta"></div>
				<h2 id="slide-title">Cafe</h2>
				<span data-slide-title="0">Cafe</span>
				<span data-slide-title="1">Ship</span>
				<span data-slide-title="2">Macaroons</span>
				<span data-slide-title="3">Stars</span>
				<div class="meta"></div>
				<div id="slide-status">status Cafe</div>
				<span data-slide-status="0">status Cafe</span>
				<span data-slide-status="1">status Ship</span>
				<span data-slide-status="2">status Macaroons</span>
				<span data-slide-status="3">status Stars</span>
			</div>
		</div>

		<img src="img/01.jpg" alt="" />
		<img src="img/02.jpg" alt="" />
		<img src="img/03.jpg" alt="" />
		<img src="img/04.jpg" alt="" />

		<div id="pagination">
			<button id="btn0" class="active" data-slide="0"></button>
			<button id="btn1" data-slide="1"></button>
			<button id="btn2" data-slide="2"></button>
			<button id="btn3" data-slide="3"></button>
		</div>

	</div>

これで基本的に完成です。

また次の項目では簡単にjsで自動スライドの記述を追加しました。

WebGL Distortion Sliderを自動スライドさせる

setIntervalを使用してボタンを3秒ごとにクリックさせるようにしました。

<script>
window.onload = function () {
	var fn = function() {
	  document.getElementById( "btn" + i ).click();
	  if(i > 2) i=-1;
	  i++;
	}
	var tm = 3000;
	var i = 1;
	var id = setInterval(fn,tm);
}
</script>

こちらが上記のサンプルになります。

サンプル