今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. ExcelのようにTableが編集できちゃう「Handsontable」
  3. 簡単実装!シンプルなアコーディオンメニュー「Accordion」
  4. テーブルのヘッダー(th)がついてくる「Mr.StickyTableHeaders」

ページ内スクロールにアニメ効果を「AnimateScroll」

スポンサーリンク

ページ内スクロールにアニメ効果を実装するプラグイン「AnimateScroll」を紹介します。

jQueryプラグイン「AnimateScroll」

このプラグインを使えば、ページ内の特定の場所にさまざまなアニメ効果でスクロールすることができます。

  • easing:アニメ効果
  • scrollSpeed:アニメのスピード
  • padding:スクロール先からのパディングを指定
スポンサーリンク

それではデモページをスクロールしてみてください。

「AnimateScroll」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="AnimateScroll のデモでーす。">
<title>AnimateScroll - jQueryプラグイン</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="animatescroll.js"></script>
<style>
.box{
  height: 1000px;
}
#demo1 {
  background-color: #eee;
}
#demo2 {
  background-color: #ddd;
}
#demo3 {
  background-color: #ccc;
}
</style>
</head>
<body>
<div id="top" class="box">
<h1>AnimateScroll のデモでーす。</h1>
<ul>
  <li><a href="#" onclick="$('#demo1').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});">easeInOutBack</a></li>
  <li><a href="#" onclick="$('#demo2').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'});">easeOutBounce</a></li>
  <li><a href="#" onclick="$('#demo3').animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});">easeOutElastic</a></li>
</ul>
</div>
<div id="demo1" class="box">
  <a href="#" onclick="$('#top').animatescroll();">トップへ戻る</a>
</div>
<div id="demo2" class="box">
  <a href="#" onclick="$('#top').animatescroll();">トップへ戻る</a>
</div>
<div id="demo3" class="box">
  <a href="#" onclick="$('#top').animatescroll();">トップへ戻る</a>
</div>
</body>
</html>
スポンサーリンク

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