curtains.js

JavaScript

カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチャ面を実装できるVanilla JavaScriptライブラリです。WebGLが使われています。インタラクティブなアニメーションに思わず注目してしまいますね。

curtains.js

デモ

画面に表示された「curtains.js」と書かれたテクスチャ面でマウスカーソルを動かしてみると分かると思いますが、カーテンがヒラヒラと揺れるようなアニメーションがマウスの動きに連動して行われます。

また、デモには他にも、Vertex coordinates helper、Simple plane、Multiple textures with a displacement shader……など、いろんなタイプが用意されています。

カーテンのような動きだけではなく、クリックすることで違う画像に流れるように切り替わっていくアニメーションなど、いろんな動きをチェックできます。

画像だけではなく、動画を活用したデモもあるので、気になる人はこちらもぜひチェックしてみてください。

curtains.js

関連記事

  1. hoverpulse

    JavaScript

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hoverpulse」

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hov…

  2. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  3. nanoGALLERY
  4. no-image

    JavaScript

    HTML要素を回転させれる「jquery-ui-rotatable」

    jquery-ui-rotatableはHTML要素を回転させれるjQ…

  5. no-image

    JavaScript

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

  6. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP