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. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

  2. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  3. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  4. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  5. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

  6. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP