【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」

 
なかなか魅力的なプラグイン「Breathing Halftone」。 ドットサイズ・カラー/モノクロ等のオプションも用意されてます。2階調で見栄えの良い画像にモノトーンでエフェクトを 掛けると面白いかも。

Breathing Halftone

Githubに公開されてますのでファイル一式をダウンロードしてください。

使い方はjQueryとダウンロードしたjsファイルを</body>の直前に読み込ませます。

Java File
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="/js/vector.js"></script>
<script src="/js/particle.js"></script>
<script src="/js/breathing-halftone.js"></script>

あとは以下のようにhtmlを記述してjavaで適用する要素を指定して完成です。

html
<img id="breathing-halftone" src="image.jpg" alt=""/>
Java
window.onload = function() {
  var img = document.querySelector('#breathing-halftone');
  var halftone = window.halftone = new BreathingHalftone( img, {
    // dotSize: 1/40
    // dotSizeThreshold: 0.4
    // oscAmplitude: 0.3
    // oscPeriod: 2
    // initVelocity: 0.01,
    isAdditive: false,
    // isRadial: true,
    // friction: 0.2,
    // isChannelLens: false,
    // channels: [ 'green', 'blue' ],
    // channels: [ 'lum' ],
    // hoverDiameter: 0.3,
    // hoverForce: -0.02,
    // activeDiameter: 0.6,
    // activeForce: 0.01
  });
};

モノクロにするとこんな感じ↓


  • 【jQuery】背景画像のスライドショーを実装する「Vegas2」
  • パララックス効果がキレイなスライダー「PIGNOSE ParallaxSlider」
  • 【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」
  • 様々なホバーエフェクトを実装できる「imagehover.css」
  • 【jQuery】画像のサイズを保持しつつレスポンシブに変化させる「ResponsifyJS」
RELATED POSTS
  • スライドアニメーションで展開するグリッドメニュー「Expanding Grid Menu」
  • アニメーションで変化するカスタムカーソル「Custom Cursor Effects」
  • CSSだけでブルブル震えるエフェクトを実装できる「CSShake」
  • 【CSS】text-shadowの使用例をまとめたサイト「Trendy CSS Text Shadows」
  • SVGボタンに様々なエフェクトを実装できる「Distorted Button Effects」
  • JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • Photoshopで簡単に背景を伸ばすテクニック
RECENT POSTS
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」