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. Animated Weather Cards

    JavaScript

    シンプルでお洒落なアニメーションつき天気予報「Animated Weather Cards」

    お洒落なアニメーションがついた天気予報カード「Animated Wea…

  2. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  3. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

  4. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  5. jQuery Elastic Grid
  6. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP