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. How satisfied are you? Slider
  2. Shuffle Letters

    JavaScript

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Lett…

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグ…

  3. no-image
  4. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

  5. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  6. lightgallery.js

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP