ページ途中に貼ったテキストバナーを目立たせたい。

あれこれ飾るよりもページをスクロールして、いいタイミングで広告を表示させるやりかたが効果的かも。

そんなときに使えるサンプルを作ってみた。(ダイヤモンドオンライン風)

バナーエリアが画面下から１５０px表示されたタイミングでスライドダウンしてバナーを表示させる。

たぶん、普通に使えると思う。

jQueryとjquery lazyaction pluginを使った。

これがサンプル

            function showBanner(target, options){
                //バナを0.3秒後に開く
                setTimeout(function(){$("ul",target).slideDown(1000);},300);
            }

            $(function(){
                $(".scrollText").each(function(){
                    $(this).lazyaction({
                        action: showBanner,
			/** 150px表示したら */
			threshold : -150
                    });
                });

            });

使ったプラグイン

jquery lazyaction plugin
プラグインに登録された領域が表示されるまで登録された関 数の実行を遅延させるプラグイン。表示されたタイミングで実行するコールバック関数を実行できる。
今回は商品の表示に使用し、画像の読み込みを遅延させた。自家製プラグイン。

これがサンプル