JavaScript

多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」をご紹介します。ページをリロードする度にランダムで形が変化するのも面白いですね。カラーや破片の数などはオプションで設定していきます。お洒落でインパクトある背景を手軽に実装したい時に活躍できますね。

[ads_center]

使い方

SHARDS

こんな感じで綺麗なグラデーションが重なり合う背景を実装できます。

使い方はとてもシンプルです。オプションにrgba値や破片の数を指定していくだけです。

$('.bg').shards([0,0,0,.5],[255,0,0,.2],[255,255,0,.1],10,2,2,.1,true);

各項目は以下のようになっています。

$('element').shards(
    colour_1,
    colour_2,
    shade_colour,
    number_of_shards,
    complexity,
    lightness,
    alpha_constant,
    fullscreen
);

CSSで描画されているので、オプションを弄るだけで気軽に変更できるのがいいですね。

関連記事

  1. Zoomer

    JavaScript

    画像をズームできてギャラリーにもすることができるjQueryプラグイン「Zoomer」

    ZoomerというjQueryプラグインを使えば画像をズームさせる機能…

  2. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  3. textfit.js

    JavaScript

    コンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」

    textfit.jsは、コンテナ内に表示するテキストをフィットさせるこ…

  4. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

  5. jQuery LED

    JavaScript

    LEDディスプレイのようなカウントダウン・タイマー・時計を実装できる「jQuery LED」

    jQuery LEDは、LEDディスプレイで表示されるようなカウントダ…

  6. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP