カラフルなメッシュ画像を表示させる「Trianglify」

こんにちは、ウェブラボ技術メモです。

今回はカラフルなメッシュ画像を表示させる「Trianglify」を使用してみようと思います。

設定を比較するDEMOを作成しました。
DEMOはこちら

様々なパターンがありますが、短いコードで簡単に設定できてしまいます。
それでは実際に実装していきましょう。

以下からプラグインをダウンロードしてください。
github

まずはhead内でjquery本体とプラグインを読み込ませます。

■HTMLhead内

次にプラグインのオプション設定を行います。
この他のオプションについては、githubにて公開されています。

■HTMLhead内 スクリプト部分

最後にスクリプト内で指定した要素とidをHTMLのbody内に記述するだけです。
この記述した箇所に、設定したサイズのメッシュ画像がcanvasタグで表示されます。

■HTML body内

対応ブラウザについて確認してみました。
◯ Google Chrome
◯ Firefox
◯ Safari
◯ Opera
◯ Internet Explorer 9、10+
× Internet Explorer 7、8
古いIEを除いて全てのブラウザで動作しました。

以上、技術メモでした。

  • このページを共有する