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

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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives