今回は切り替え時のアニメーションにWebGLを使い、グラフィック表現を豊かにしたスライダーのサンプルを非プログラマー的思考で解説します。
WebGLとはウェブブラウザで3Dグラフィックスコンテンツの表示を可能とさせる標準仕様になります。
代表的なライブラリにthree.jsがあります。
当サンプルでも画像の切り替わり時のグラフィックにthree.jsを使用してのスライダーになります。
必要ファイルの読み込み
上記サイトを参考に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>
こちらが上記のサンプルになります。
まとめ
WebGLのサンプルは一気に導入とカスタマイズの敷居が高くなる印象でした。
まだIE11で完全に対応していないので導入するのに抵抗がありますがアニメーションの表現レベルは高いと思いました。

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