今日の人気記事

  1. レスポンシブなメニューを作成「MeanMenu」
  2. 数値のカウントアップ - さまざまなフォーマットに対応「Counter-Up」

手書き取り消し線のデザインをWeb上に「Squiggle」

当ページのリンクには広告が含まれています。

スポンサーリンク

手書き修正のデザインをWeb上で簡単に表現するjQueryプラグイン「Squiggle」を紹介します。

jQueryプラグイン「Squiggle」

このプラグインの特徴は、strikeタグ、delタグを使った取り消し線はでは表現できない手書きの「ぐじゅぐじゅ感」というか「クシュクシュ感」を"HTML5 Canvas"を使って表現してくれます。

これがなかなかいい感じなので、Web上のアクセントにおすすめです。

スポンサーリンク

デモで「手書き取り消し線」の感じをご覧ください。

「squiggle」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="squiggle のデモでーす。">
<title>squiggle - jQuery Plugin Demo</title>
</head>
<body>  
<section>
<p><a href="https://webkaru.net/jquery-plugin/squiggle/">「jQueryプラグインまとめ」に戻る</a></p>

<h1>squiggleのデモでーす。</h1>
<p>jQueryはクロスブラウザに対応した<span class="scribble">PHP</span>javascriptのライブラリです。</p>
<p>クライアントサイドのスクリプト言語で、簡単に記述できるのが特徴です。</p>
<p><span class="scribble">65歳以上のお年寄り</span></p>
<p>65%以上ものWebサイトで利用されている大人気なjavascriptライブラリだよ。</p>
</section>

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="squiggle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.scribble').squiggle({
    intensity:30,
    thickness:3
  });
});
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)