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

最近のサイトはフッターに多くの情報を載せて回遊率の向上を図っています。
これをJavaScriptを利用して、もっと印象的にさせられます。
via：End of Page Slide Out Box with jQuery | Codrops

使用方法

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】を付与すれば完成です。

サンプル

出てくるよ⇒


[×]

skuare.netはJavaScriptを紹介しています。

Javascriptサンプルページ一覧
skuare.net
Read More >