今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. select要素の複数選択フォームを実装「Multiple Select」
  3. クリック操作でWebサイトを翻訳「translate.js」
  4. 現在時刻も表示できるカウントダウン・タイマー「countdownTimer」
  5. クリックで開閉!ドロップダウン・サイドメニュー「Tendina」

自動的にスクロールバーが隠れる「Scroll Fade」

スポンサーリンク

自動的にスクロールバーが隠れる効果(アニメーション)を実装するプラグイン「Scroll Fade」を紹介します。

jQueryプラグイン「Scroll Fade」

HTMLでは、divボックスやtableなどの範囲内におさまらないコンテンツにスクロールバーを表示することができます。CSSのoverflowプロパティで設定するアレです。

このプラグインを使えば、スクロールしたときにはスクロールバーを表示し、一定時間が経過するとスクロールバーを隠す(非表示)効果をサイトに付加することができます。

スポンサーリンク

デモで、実際にスクロールバーの表示/非表示をご確認ください。

「Scroll Fade」のデモ

ソース( 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>
スポンサーリンク

関連記事(一部広告含む)