Webデザイナーブログから学ぶホームページ制作

ホームページを閲覧して画面を下までスクロールしたときに、JavaScriptで設定することによって、右下からBOXがするっと表示を出すことができます。
画面スクロールで下まで行ったときに、BOXの窓が開き、SNSや広告が表示されたり用途は様々ですが需要は沢山ある要素です。
画面を下までスクロールしたときにBOXを表示させる「JavaScript」の設定方法を解説します。

下記からJavaScriptライブラリ、のダウンロードを行ってください。
jQueryライブラリダウンロード

html、css、JavaScriptファイルを作成します。

<div id="slide">
<div id="slide-in">
<div id="open-btn"><img src="/sample/005/img/open-btn.gif" width="20" height="20" /></div>
<h3>こちらが開きます。</h3>
<div id="slide-contents">
<div id="slide_inner">
※この中にBOX内の内容を記載。
</div>
</div>
</div>
</div>

#slide {
	position: fixed;
	width: 180px;
	height: 30px;
	bottom: 0;
	right: 0;
	color: #666;
	background: #fff;
	border-left: solid 1px #cfcfcf;
	border-top: solid 1px #cfcfcf;
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
	filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
}
#slide_inner {
	float:left;
	padding:60px 20px 10px 20px;
}
#slide-in {
	padding: 5px 10px;
}
#slide a {
	text-decoration: none;
	cursor: pointer;
}
#slide h3 {
	font-size:12px;
	margin-bottom: 5px;
}
#slide #open-btn {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background: url(/sample/005/img/close-btn.gif);
}

$(function() {
	var slide = $('#slide');
	var contents = $('#slide-contents');
	//開くボタン
	var openBtn = $('#open-btn img');
	var btnOpenFlag = false;
	var openFlag = false;
	var panelSwitch = function() {
		//閉じる
		if (openFlag == true ) {
			slide.stop().animate({'width' : '180px','height' : '30px'}, 500); 
			openBtn.show();		//開くボタンにする
		}
		//開く
		else if (openFlag == false) {
			slide.stop().animate({'width' : '550px','height' : '250px'}, 500); 
			openBtn.hide();		//閉じるボタンにする
		}
	};
	//開くボタンクリックしたら
	$('#open-btn').click(function(){
		panelSwitch();
		openFlag = !openFlag;
		btnOpenFlag = true;
	});
	//画面下位置を取得
	var bottomPos = $(document).height() - $(window).height() - 500;
	$(window).scroll(function () {
		if (!btnOpenFlag) {
			if ($(this).scrollTop() >= bottomPos) {
				if (openFlag == false) {
					panelSwitch();
					openFlag = true;
				}
			} else {
				if (openFlag) {
					panelSwitch();
					openFlag = false;
				}
			}
		}
	});
});

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

<meta charset="UTF-8">
<title>画面下までスクロールすると右下にBOXが開く「JavaScript」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="jQueryを使った下部までスクロールすると右下にBOXが開くアクションのご紹介を致します。">
<meta name="keywords" content="スクロール,ホームページ作成方法,jquery.quickflip.source.js,スクリプト,右下にBOX">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/005/base.css" media="all" />
<script type="text/javascript" src="/sample/005/jquery.js"></script>
<script type="text/javascript" src="/sample/005/slide.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=176108812440433";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

実装サンプルを作りましたのでこちらでも確認してみてください。
スクロールアクション デモ

以上で設定完了となりますが、簡単に設定ができますね。
画面をスクロールしてときに起きるアクション要素は色々あります。
スクロールアクションは用途が沢山ありますが、ここでご紹介した「jQuery」は動画も表示させることが出来るのでスクロール時に動画やYouTubeを表示させるのも良いかと思います。
出来る限りユーザーにストレスを与えないで楽しく見てもらえる要素をつくることが大切です。