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

リッチテキストから標準テキストに変更テキストエディットでリッチテキストから標準テキストに変更するやり方とショートカットキー前のページ

レスポンシブで豊富なエフェクトのイメージスライダー「ArtDesignSlider」次のページArtDesignSlider

関連記事

  1. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  2. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  3. Basic Metro Dynamic jQuery Tab Menu
  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

  5. no-image

    JavaScript

    あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」

    Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグ…

  6. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP