no-image

JavaScript

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

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

幻想的なアニメーション

デモ

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

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

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

no-imageシンプルなバナースライドショーを実装できる「jsslider」前のページ

Macでデスクトップ毎にアプリを割り当てる(固定する)設定方法次のページno-image

関連記事

  1. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  2. no-image

    JavaScript

    ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

    Bore Bones Sliderはミニマリスティックでフレキシブルな…

  3. no-image

    JavaScript

    HTML要素を回転させれる「jquery-ui-rotatable」

    jquery-ui-rotatableはHTML要素を回転させれるjQ…

  4. Changing Background Color while scrolling
  5. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

  6. DateTime Picker

    JavaScript

    レスポンシブでフラットデザインの「DateTime Picker」

    DateTime Pickerはレスポンシブ対応のフラットデザインによ…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP