自動的にスクロールバーが隠れる「Scroll Fade」
当ページのリンクには広告が含まれています。
スポンサーリンク
自動的にスクロールバーが隠れる効果（アニメーション）を実装するプラグイン「Scroll Fade」を紹介します。
jQueryプラグイン「Scroll Fade」
HTMLでは、divボックスやtableなどの範囲内におさまらないコンテンツにスクロールバーを表示することができます。CSSのoverflowプロパティで設定するアレです。
このプラグインを使えば、スクロールしたときにはスクロールバーを表示し、一定時間が経過するとスクロールバーを隠す（非表示）効果をサイトに付加することができます。
スポンサーリンク
デモで、実際にスクロールバーの表示/非表示をご確認ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="TourTipのデモでーす。">
<title>Scroll Fade - jQueryプラグイン</title>
<link href="jquery.scrollfade.css" media="all" rel="stylesheet" type="text/css">
<style>
.window{
border: 1px solid blue;
height: 300px;
width: 600px;
margin: 60px;
}
</style>
</head>
<body>
<h1>Scroll Fade のデモでーす。</h1>
<div class="window">
<p>ああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああ</p>
<p>うううううううううううううううううううううううううううううううう うううううううううううううううううううううううううううううううう うううううううううううううううううううううううううううううううう</p>
<p>ああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああ</p>
<p>うううううううううううううううううううううううううううううううう うううううううううううううううううううううううううううううううう うううううううううううううううううううううううううううううううう</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.scrollfade.js"></script>
<script>
$(function(){
$('.window').scrollfade();
});
</script>
</body>
</html>
スポンサーリンク