no-image

JavaScript

SVGによるトライアングルパターンを表示できる「jquery-svgTrianglePattern」

jquery-svgTrianglePatternは、SVGを使ったトライアングルパターンによるアニメーションを表示できるjQueryプラグインです。フワフワとした美しいトライアングルパターンで画像を表示させたり、画像上にそのようなアニメーションを加えたりすることができます。

幻想的なアニメーション

デモ

デモには2つのページが用意されています。demo01ではページ読み込み時に画像がトライアングルパターンとともに表示され、一定時間が経過すると再びトライアングルパターンになって画像が消えていきます。一方、demo02では予め表示された画像上にトライアングルパターンが浮かび上がってきます。どちらもフワフワとしたアニメーションで、見ていてとてもおもしろいですね。

トライアングルパターンは画像全体に散りばめられていて、demo02では消えたり出てきたりを繰り返しながらアニメーションするのでとても幻想的な雰囲気で画像を見せることができます。

SVGによる美しいトライアングルパターンを活用したい人は、ぜひ「jquery-svgTrianglePattern」を使われてみてはいかがでしょうか?

関連記事

  1. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  2. ToProgress

    JavaScript

    画面上部に軽量なプログレスバーを実装できる「ToProgress」

    ToProgressは画面上部にシンプルで軽量なプログレスバーを実装で…

  3. no-image

    JavaScript

    続きを読むボタンを実装できる「ReadMorePlugin」

    ReadMorePluginは「続きを読む」、「もっと読む」、「Rea…

  4. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  5. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  6. no-image

    JavaScript

    ミニマルでダイナミックなLightboxプラグイン「darkbox.js」

    darkbox.jsはミニマルながらもダイナミックなLightbox風…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP