フェードインでテキストを表示させるシンプルなjQueryプラグイン「reveal-it.js」

非常にシンプルですが、使い勝手がよいプラグインかもしれません。
テキストを左から右にフェードインで徐々に表示させてくれるjQueryプラグインreveal-it.jsです。 フェードインでテキストを表示させるシンプルなjQueryプラグイン「reveal-it.js」サンプル

使用方法 reveal-it.jsからファイルをダウンロード。
<div class="box1">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

上記のような要素があったとします。
これに対してJavaSCriptなどを記述していきます。
<link href="reveal-it.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="reveal-it.js"></script>
<script type="text/javascript">
$(function () {
var options1 = {
id: 'box1' //ここのIDはdivなどの各要素のものを意味しているわけではありません
};
$('.box1').initReveal(options1);
});
</script>

これですぐに表示させるパターンは完了です。
ただし良く使いたいのは、その要素が表示されてからアクションが起きるというケースかと思います。
そこれ下記のようにoptionを変更します。
var options1 = {
id: 'box1'
, auto: false
, trigger: 'on-visible'
};

これで対象要素が表示されてからフェードインするようになります。
またちょっと遅れて表示させたいなどは下記の設定を付与します。
※背景色もおまけで設定できます。 var options1 = {
id: 'box1'
, delay: 3000
, background: '#555' //背景色
};

フェードインでテキストを表示させるシンプルなjQueryプラグイン「reveal-it.js」サンプル

sponsors

「フェードインでテキストを表示させるシンプルなjQueryプラグイン「reveal-it.js」」をシェアする

記事作成:
記事URL:

TOP > > > フェードインでテキストを表示させるシンプルなjQueryプラグイン「reveal-it.js」