Brusher

JavaScript

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

Brusherはインタラクティブな背景を実装できる軽量なJavaScriptライブラリです。背景でマウスカーソルを動かすことで、それに合わせてぼやけた背景がクッキリ見えるようになります。遊び心があり、とてもおもしろいですね。

Brusher

デモ

デモではぼやけた背景が表示されていて、この背景内でマウスカーソルを動かすと、動かした部分がクッキリ表示されます。マウスカーソルをたくさん動かすことで背景がどのようになっているのかが分かってくるので、おもしろい機能ですね。

ちょっとした遊び心をサイト内に取り入れたい人にはピッタリな機能になるのではないでしょうか?

オプションには、image、keepCleared、stroke、lineStyle、autoBlur、autoBlurValueといった項目が用意されています。

また、デモページにはほかにも、Keep Cleared Sections、Without Background Demo、Sticky Blur Demo、Different Line Styleといった違うタイプのデモもあるので、気になる人はぜひチェックしてみてください。

Brusher

関連記事

  1. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  2. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  3. no-image
  4. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  5. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

  6. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP