ページを最後まで見たらメッセージを表示するJavaScript「End of Page Slide Out Box with jQuery」

最近のサイトはフッターに多くの情報を載せて回遊率の向上を図っています。
これをJavaScriptを利用して、もっと印象的にさせられます。
via:End of Page Slide Out Box with jQuery | Codrops
ページを最後まで見たらメッセージを表示するJavaScript「End of Page Slide Out Box with jQuery」サンプル

使用方法
jQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function(){
//idがlastの高さを取得
var distanceTop = $('#last').offset().top - $(window).height();

if ($(window).scrollTop() > distanceTop)
//lastの高さの場合、slideboxを右から0pxの位置に動かします
$('#slidebox').animate({'right':'0px'},300);
else
//それ以外の場合、slideboxのボックスサイズ分ネガティブマージン
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>

上記を記述し、#slideboxにCSSを付与します。
#slidebox{
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #E28409;
position:fixed;
bottom:0px;
right:-430px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;
}

また、最後の要素にid【last】を付与すれば完成です。

ページを最後まで見たらメッセージを表示するJavaScript「End of Page Slide Out Box with jQuery」サンプル

sponsors

「ページを最後まで見たらメッセージを表示するJavaScript「End of Page Slide Out Box with jQuery」」をシェアする

記事作成:
記事URL:

TOP > > > ページを最後まで見たらメッセージを表示するJavaScript「End of Page Slide Out Box with jQuery」