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. jQuery Navobile
  2. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  3. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  4. jQuery.GI.TheWall.js
  5. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

  6. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP