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

Brusherインタラクティブな背景を実装できる「Brusher」前のページ

カスタマイズ性に優れたスクロールバーを実装できる「OverlayScrollbars」次のページOverlayScrollbars

関連記事

  1. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  2. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  3. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

  4. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  5. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

  6. Lightense Images

最近の記事

  1. Anker PowerPort 5-in-1 37.5W Hub
  2. α7C + FE28-60mm F4-5.6
  3. Apple Watch Series 6
  4. iPad Air

アーカイブ

PAGE TOP