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で描画されているので、オプションを弄るだけで気軽に変更できるのがいいですね。

超コンパクトなミドリのCLメジャー(1.5m・白)を購入前のページ

旅行や携帯に便利なとっても小さいエビスの「くりたん 舌クリーナー」次のページエビスの「くりたん 舌クリーナー」

関連記事

  1. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  2. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

  3. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  4. lightGallery
  5. chalk-animation

    JavaScript

    カラフルなアニメーションを実装できる「chalk-animation」

    chalk-animationはカラフルなアニメーションによるテキスト…

  6. WebSnowjq.js

    JavaScript

    Webページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」

    WebSnowjq.jsはWebページの中に雪を降らせることができるj…

コメント

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

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

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP