-
1:ID:i3KjOT · 1週間前

このサイトの仕組みを教えてほしい

http://jetlag.photos
このサイトで、画像が分割されている表現があると思うんですが、
これはpixi.jsのどういった機能を使って画像を分割しているのでしょうか?

5 件の回答

2:ID:FBjuEx · 1週間前

特に用意された機能ではないようだが。力技で分割してると思う。具体的には必要分の長方形を作って、それぞれの長方形に元画像をコピーしてマスクしてズラせばいい。Nivo Sliider っていうのが似たような事をする。
https://github.com/Codeinwp/Nivo-Slider-jQuery

3:ID:/aFNxY · 1週間前

これJSだけで実装できなかったっけ?
こんな感じのチュートリアル見たことあるぞ。
Webgl使うならシェーダー自前で書ける人なら実装できそう。pixi.jsは知らんけど。

4:ID:PfWFod · 1週間前

このサイト、写真もテキストもボタンも全部一枚のcanvas上に描画してるんだな
マウスイベントなんかもJSで座標管理してやってるんだと思う
普通のスライダーのトランジションとは違うね

5:ID: · 1週間前

Re:4
はい、pixi.jsの公式サイトに乗っていた事例サイトでした。

そのため、コードがよめないんです;

6:ID: · 1週間前

Re:5
おそらくですが、As3でいうBitmapDataの分割機能的(たしかあったような)なものでやっているのかなと思ったのですが、pixiの場合同じようなものがでてこなく、詰まったという感じです

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る