あっという間に画像をドット絵に!jQueryプラグイン「SeuratJS」

あっという間に画像をドット絵に!jQueryプラグイン「SeuratJS」サンプル 画像をドットっぽく加工するとひと味違った見た目になり、印象的です
それをjQueryでやってしまうプラグイン「SeuratJS」を紹介します。

使用方法 SeuratJS - A Raphae"l plugin for creating beautiful pointillized animations.からファイル一式をダウンロード。
また、今回はRaphae"l―JavaScript Libraryも必要になるので、こちらもダウンロードしておきます。
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="seurat.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名').click(function(){
var width = $(this).width(); var height = $(this).height();
var raphaelContainer = $('<div id="'+$(this).attr('id')+'"></div>')
.width(width)
.height(height);
$(this).replaceWith(raphaelContainer);
var paper = new Raphael(document.getElementById($(this).attr('id')),width,height+5);
paper.seurat({ imageSource: $(this).attr('src')});
});
});
</script>

上記のように記述したら、画像に指定したidを付与すれば完成です。
<img src="画像パス" id="id名" />
今回のサンプルはクリック時にサークル状にするだけでしたが、正方形だったりアニメーションをつけたりすることも可能です。

あっという間に画像をドット絵に!jQueryプラグイン「SeuratJS」サンプル

sponsors

「あっという間に画像をドット絵に!jQueryプラグイン「SeuratJS」」をシェアする

記事作成:
記事URL:

TOP > > > あっという間に画像をドット絵に!jQueryプラグイン「SeuratJS」