Rainbow.js

JavaScript

テキストやボックスをレインボーにグラデーションできるjQueryプラグイン「Rainbow.js」

Rainbow.jsというjQueryプラグインを使ってみました。テキストやボックスを手軽にレインボーにグラデーションすることができます。HTMLのタグ内にカラーなどを設定していくことができるのでわかりやすいですね。以下、使い方です。

[ads_center]

Rainbow.jsの使い方

実際に試してみると、このように簡単にグラデーションのボックスやテキストを作ることができます。

Rainbow.jsの使い方

使い方はhead内にjQueryとプラグインを読み込みます。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="rainbow.js"></script>

あとはHTML側でグラデーションを反映させる要素を作っていくだけです。以下はボックスに適用した例。

<div
    class="square rainbow"
    id="gradient_2"
    data-type="linear"
    data-degrees="45"
    data-color="f1c40f-d35400"
    data-opacity="1"
></div>

縦横サイズはCSSで設定しておきます。

.square {
    width: 200px;
    height: 200px;
}

これだけでボックスを簡単にグラデーションにすることができます。手軽で使いやすいですね。

テキストの場合は以下のように設定します。

<h1
    class="rainbow"
    id="rainText_1"
    data-type="linear"
    data-degrees="0"
    data-color="000-F00"
>サンプルテキスト</h1>

その他にも画像にグラデーションをかけたりなんてこともできるみたいです。複雑なCSSでグラデーションを作るのがめんどくさいと思っている人にはとても便利なプラグインですね。

Rainbow.js

CSSViewer特定の要素のCSSを手軽に確認できるChrome拡張機能「CSSViewer」前のページ

メトロスタイルなSNSアイコンをウィジェットで実装できるWordPressプラグイン「Metro Style Social Widget」次のページ

関連記事

  1. Zoomify

    JavaScript

    画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」

    Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのた…

  2. socialShare.js
  3. Audero Smoke Effect

    JavaScript

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

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

  4. Rollerblade.js

    JavaScript

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

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

  5. CoutUpCircle

    JavaScript

    カウントアップしてくれるjQueryプラグイン「CoutUpCircle」

    CoutUpCircleは目標に指定した数までカウントアップしてくれる…

  6. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP