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. funnyText.js
  2. Parallax Slider with jQuery
  3. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

  4. no-image

    JavaScript

    シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

    snakeMenuはシンプルなアニメーションによるドロップダウンメニュ…

  5. JavaScript

    カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia

    insigniaはカスタマイズ性に優れたタグ入力を実装することができる…

  6. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

コメント

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

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

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP