手書き取り消し線のデザインをWeb上に「Squiggle」
当ページのリンクには広告が含まれています。
スポンサーリンク
手書き修正のデザインをWeb上で簡単に表現するjQueryプラグイン「Squiggle」を紹介します。
jQueryプラグイン「Squiggle」
このプラグインの特徴は、strikeタグ、delタグを使った取り消し線はでは表現できない手書きの「ぐじゅぐじゅ感」というか「クシュクシュ感」を"HTML5 Canvas"を使って表現してくれます。
これがなかなかいい感じなので、Web上のアクセントにおすすめです。
スポンサーリンク
デモで「手書き取り消し線」の感じをご覧ください。
デモのソース（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>
スポンサーリンク