reveal-it.js

JavaScript

左から右へテキストが美しくフェードイン表示する「reveal-it.js」

reveal-it.jsはテキストが左から右へかけて徐々にフェードイン表示するjQueryプラグインです。エフェクトがとても美しくてさりげない感じがいいですね。テキストにちょっとしたアクセントを与えたい時に活用してみたいです。

reveal-it.jsの使い方

以下はreveal-it.jsのデモになります。ページが読み込まれると文字がフェードインしてきます。クリックイベントで表示させたり、なんてこともできるみたいですね。

reveal-it.js

デモ

使い方はプラグインファイルなどを読み込んだ状態でHTMLをこんな感じで記述して、

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <p>サンプルテキスト</p>
            <div class="box1">
                <h1>サンプルテキスト</h1>
            </div>
        </div>
    </div>
</div>

reveal-it.jsをセットしてあげるだけです。

jQuery(function () {
    var options1 = {
        id: 'box1'
    };
    $('.box1').initReveal(options1);
});

オプションでディレイや背景を設定することもできます。

var options1 = {
    id: 'box1'
    , delay: 3000
    , background: '#555'
};

reveal-it.js Code Samples

reveal-it.js

関連記事

  1. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  2. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  3. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  4. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

  5. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  6. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP