今日の人気記事

  1. Web上でプレゼンテーションを「LocalScroll」 - jQueryプラグイン
  2. 指定した要素の高さや横幅にアニメ効果を「CSS Animate Auto」

自動的にスクロールバーが隠れる「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>
スポンサーリンク

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