[JS]これはワクワクする、3Dのスペースに美しい光のエフェクトを与えるスクリプト -Photon

3DのスペースでDOMエレメントにシンプルな光のエフェクトを与えるスクリプトを紹介します。

サイトのキャプチャ

Photon

Photonのデモ

Photonの対応ブラウザはWebKitCSSMatrixを使用していため、Webkit系のChrome, Safariでご覧ください。
ホバーでオブジェクトがさまざまに動き、光のエフェクトが追従します。

サイトのキャプチャ

Photon: Demo 1

折鶴をぐるぐる回転させます。

サイトのキャプチャ

Photon: Demo 2

紙を蛇腹状に折り回転させます。

サイトのキャプチャ

Photon: Demo 3

各パネルがアコーディオンのように伸び縮みします。

Photonの使い方

光のエフェクトは下記のフォーマットで実装します。

// create a face with a max shade of .5
var face = new Photon.Face( $('.face-1')[0] );

詳しい実装方法は、下記のドキュメントをご覧ください。

top of page

©2017 coliss