markerPen

JavaScript

Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

markerPenはWebページにマーカーで描ける機能を実装することができるシンプルなjQueryプラグインです。マウスをドラッグすることで、それに連動して自由にマーカーで描けます。とてもスムーズに操作できるのがいいですね。

オプションでカラーや不透明度なども設定できる

デモ

Webページ内でマウスをドラッグすると、それに合わせてマーカーが引かれていきます。画面の下には、Hide Markings、Disable markerPen、Clear、Marker、Eraserというメニューが用意されています。

ここから、マーカーの有効/無効を切り替えたりクリアにしたりといった機能を行えます。複雑な機能などは特にないので、シンプルでとても操作しやすいですね。

また、オプションにはcolor、stroke、opacityといった項目が用意されています。好きなカラーを設定したり、ストロークや不透明度を調節したりと、ちょっとしたカスタマイズが可能です。

使いどころは限られるかもしれませんが、Web上で手軽にマーカー機能を実装したいという人は、ぜひ活用してみてはいかがでしょうか?

markerPen

関連記事

  1. Hero slider

    JavaScript

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

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

  2. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  3. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  4. Animated Heat Distortion Effects with WebGL

    JavaScript

    陽炎のような揺れを表現できる「Animated Heat Distortion Effects wi…

    夏の暑い日などによく見かける「陽炎」のようなエフェクトを実装することが…

  5. ScrollMe

    JavaScript

    シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」

    ScrollMeというjQueryプラグインを使えば、シンプルでスタイ…

  6. JavaScript

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP