Released!

Splide Premium

WebGLのシェーダを利用した、目をみはるようなトランジション。

スポンサー限定のレポジトリで公開中!

Fiber Mask

Radial Gradient Mask

Wave Mask

Cloud Mask

Dissolve

Splide Shader Carousel

Splide Shader Carouselはthree.jsライブラリを使用してWebGLを操作しています。WebGLの採用によって、CSSでは再現できない、多彩で魅力的なトランジションエフェクトを実現することができます。

次の図のように、Splide Shader Carouselはcanvasを通常のフェードスライダーの背面に配置し、各スライド内にある画像をメッシュのテクスチャに変換したうえで、お互いを同期させています。

Place the canvas behind the main carousel

現段階では、テクスチャとして画像のみをサポートしていますが、将来的には動画もサポートする予定です。

注意点

SplideShaderCarouselクラスはSplideクラスを継承していますが、

  • フェードタイプのみサポートしています
  • IEをサポートしていません
  • Splideのオプションすべてをサポートしているわけではありません

サポートしていないオプションは次の通りです: type (fadeのみ)、perPage、perMove、clones、cloneStatus、focus、gap、padding、easingFunc、lazyLoad、cover。

また、three.js自体かなりサイズが大きいため(500kB+)、サイトのLighthouseスコアが下がるかもしれません。

利用規約

このパッケージは、MITライセンスを基本として公開されますが、再配布目的での使用はできません。"dist"ディレクトリ内にあるファイル、またはそれらからビルドされたファイルは、Splide Shader Carouselを使用者のプロジェクトに実装する目的で、サーバやレポジトリ上で公開することができます。これらのファイルは、以下のティアに定めるスポンサーになった時点から、個人、商用にかかわらず自由に使用できます。ただし、そのほかのファイル(たとえばソースコードや例、あるいはドキュメントなど)を公開することはできません。これは、スポンサー限定のレポジトリという特性上の規約です。

Personal Developer$10~
Organization$100~

なお、スポンサーをキャンセルすると、GitHubが自動的に解除手続きを行いますが、その時点でのパッケージはそのまま使用し続けて問題ありません。

スポンサーになる

上記の注意点と規約に必ず目を通してください。

スポンサーページへ