no-image

JavaScript

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

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

幻想的なアニメーション

デモ

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

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

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

関連記事

  1. lightgallery.js
  2. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  3. mFancyTitle

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

  4. jQuery Quick Modal
  5. jQuery Video Extend

    JavaScript

    動画をチャプターごとに区切れる「jQuery Video Extend」

    jQuery Video Extendは動画をチャプターごとに区切った…

  6. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP