カラフルなメッシュ画像を表示させる「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を除いて全てのブラウザで動作しました。

以上、技術メモでした。

  • このページを共有する