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. nuContextMenu

    JavaScript

    モダンなコンテキストメニューを実装できる「nuContextMenu」

    nuContextMenuはモダンで軽量なコンテキストメニューを実装で…

  2. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  3. CSS Emoticons
  4. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  5. pagePiling.js

    JavaScript

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

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

  6. Swipebox

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP