WebGL

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

参考サイト
WebGL Distortion Slider

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

上記以外にthree.jsimagesloaded.pkgd.jsimagesloaded.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側は以下のように記述しました。

スライドするタイトルテキストに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で自動スライドの記述を追加しました。

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>

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

サンプル

WebGLのサンプルは一気に導入とカスタマイズの敷居が高くなる印象でした。

まだIE11で完全に対応していないので導入するのに抵抗がありますがアニメーションの表現レベルは高いと思いました。

uhaha

IEのサポート期限切れとwebGLのIE対応どちらが早いんだろう

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

コメントを残す

*