はじめに
ライブラリを育てたい欲が湧いたので作っている。
イメージしているのは"Swiper"みたいなスライダーライブラリのGLSLでtransitionできるやつ。
つくってみたはいいものの実際に使ってもらうようにドキュメントを整備したりするのはまだまだ時間がかかりそう。
継続するにはモチベーションの維持が必要。。
XSlider
demo
https://112ka.github.io/xslider/demo/
特徴
- shaderでtransitionが書ける
- 他のライブラリに依存していない
- svgの<foreignObject>タグを使って、DOMをTextureにできる
(<foreignObject>タグでは、cssのbackground-imageの画像が表示されないというMSEdgeのバグ有)
- 何個かスライド飛ばすときの連続で切り替わる仕様は気に入っている↓↓↓
- あと無駄にスライドつかんで投げられる↓↓↓
（PCでドラックするとテキスト選択して動作微妙になっちゃうけど、スマホなら投げる感じがでやすい）
使い方
最小構成は こちら。
インストールしてCSSとJSをinclude
npm install xslider
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="path/to/xslider.min.css">
</head>
<body>
...
<script src="path/to/xslider.min.js"></script>
</body>
</html>
htmlの書き方例
<div class="xslider">
<div class="xslider-view">
<div class="xslider-slide">
<div class="xslider-layer-gl">Elements as texture</div>
<div class="xslider-layer-ui">Elements as DOM</div>
</div>
<div class="xslider-slide"></div>
...
</div>
<div class="xslider-pager"></div>
</div>
cssの記述
.xslider {
width: 400px; height: 300px;
}
jsの記述
new XSlider(".xslider");
Transitionについて
Preset TransitionのGLSLは以下のサイトを大いに参考にさせていただいている。
https://gl-transitions.com/
引用は各ソースに書いた。
ピックアップすると、
など。
リンクを開いて左右の矢印でtransitionが確認できる。
この他、オリジナルのtransitionも追加しやすいようなつくりのつもりだが、追加のやり方がわかるようなDocumentはまだない。
svgの<foreignObject>でのdom描画について
dom-to-imageを参考にさせてもらった
最初はこのライブラリに依存していたが、不具合の検証したくなったりで、カスタマイズしたくなって結局車輪の再開発をすることに。。
MSEdgeで背景に設定した画像が表示されない。
問い合わせてはいるが私の英語がうんこなため、 -> 対応が止まっている気がする
(↑「Assigned to comptriage」ってなんやねん)
Edgeでみれないとなると、案件ではなかなか使えない。
スマホのみで見せるやつだったり、background-imageで画像を指定しなければEdgeでもいけるはず。
webglの描画システムについて
最初THREE.jsで動かしていたが、余計な記述で増える容量が気になったので、以前c++でつくってたやつをjsに移植した。
多少余計な記述は残っているが、トータルでは軽くなった。
まとめ
- まだまだ人に使ってもらうにはドキュメント足りない
- 動作の検証も十分にできていない
- とりあえず自分の仕事で使ってみたいが、Edgeで動作保証してないので、スマホサイトのみの案件で機会があればつかってみる