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

no-image続きを読むボタンを実装できる「ReadMorePlugin」前のページ

カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」次のページcurtains.js

関連記事

  1. Spring Loaders

    JavaScript

    ポリゴンによるローディングアニメーションがかっこいい「Spring Loaders」

    Spring Loadersはポリゴンでつくられたローディングアニメー…

  2. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  3. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  4. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  5. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  6. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

最近の記事

  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