東京都新宿区のWeb制作会社 ウェブラボ株式会社

スタッフブログ

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

2017.08.25 Posted by

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

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

以上、技術メモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278