skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

画像を印象的なドット絵にしてくれるjQueryプラグイン「Breathing Halftone」

画像を印象的に加工するのは面倒ですが、breathing-halftoneを利用すればそんな心配も不要です。
あっという間にカラフルなドット絵が完成します。

sponsors

使用方法 breathing-halftoneからファイル一式をダウンロード。
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="vector.js"></script>
<script type="text/javascript" src="particle.js"></script>
<script type="text/javascript" src="breathing-halftone.js"></script>
<script>
$(function(){
var amp-img = $('#id名')[0];
new BreathingHalftone( img, {
dotSize: 1/40, //ドットサイズ
initVelocity: 0.1, //速度
oscPeriod: 3, //動きの速度
isRadial: true //グリッド状に整列させる
});
});
</script>

上記を記述したらあとは画像を上記のid名で書けば完成です。
<amp-img src="画像パス" id="id名">
画像を印象的なドット絵にしてくれるjQueryプラグイン「Breathing Halftone」サンプル

sponsors

「画像を印象的なドット絵にしてくれるjQueryプラグイン「Breathing Halftone」」をシェアする

記事作成:
記事URL:

TOP > > > 画像を印象的なドット絵にしてくれるjQueryプラグイン「Breathing Halftone」

前の記事:
次の記事:画像を簡単にInstagram風に加工!jQueryプラグイン「simpleFilter.js」

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more