hop

JavaScript

Webページ上の好きな場所をハイライトできる「hop」

hopはオーバーレイされたWebページ上の好きな場所をハイライトすることができるjQueryプラグインです。マウスのカーソルが丸い円で表示され、好きなポイントに動かしながらハイライトさせることが可能です。

hop

hop

デモには「let”s focus」「then Animate」「and now follow the mouse」の3つのボタンが用意されています。「and now follow the mouse」をクリックすると、ハイライトを自由に動かせるようになります。

ページ全体が黄色でオーバーレイされていますが、白いハイライト部分を動かすことで、好きなポイントをチェック可能です。

オプションに、color、radius、opacity、borderWidth、borderColorといったものが用意されているので、ちょっとしたカスタマイズをしたい人にもうれしいですね。

というわけで、Webページ上でハイライトを可能にするjQueryプラグイン「hop」のご紹介でした。

Force.js要素を手軽にアニメーション化できる「Force.js」前のページ

設定した高さに基づいて複数行のテキストを切り取る「Shave」次のページShave

関連記事

  1. no-image

    JavaScript

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

  2. Simple jQuery Slider

    JavaScript

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

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

  3. jquery.square.js

    JavaScript

    スクエアなグリッドレイアウトを実装できる「jquery.square.js」

    jquery.square.jsは、スクエアなグリッドレイアウトを実装…

  4. Image Gallery Threejs
  5. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  6. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP