curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチャ面を実装できるVanilla JavaScriptライブラリです。WebGLが使われています。インタラクティブなアニメーションに思わず注目してしまいますね。
curtains.js
以下のページからcurtains.jsの実際のデモ動作をチェックできます。
画面に表示された「curtains.js」と書かれたテクスチャ面でマウスカーソルを動かしてみると分かると思いますが、カーテンがヒラヒラと揺れるようなアニメーションがマウスの動きに連動して行われます。
また、デモには他にも、Vertex coordinates helper、Simple plane、Multiple textures with a displacement shader……など、いろんなタイプが用意されています。
カーテンのような動きだけではなく、クリックすることで違う画像に流れるように切り替わっていくアニメーションなど、いろんな動きをチェックできます。
画像だけではなく、動画を活用したデモもあるので、気になる人はこちらもぜひチェックしてみてください。
というわけで、カーテンが動くような、どこか神秘的な動きをテクスチャ面に実装できる「curtains.js」の紹介でした。curtains.jsの詳しい使い方やダウンロードは、以下のページからどうぞ。
