ページ内スクロールにアニメ効果を「AnimateScroll」
当ページのリンクには広告が含まれています。
スポンサーリンク
ページ内スクロールにアニメ効果を実装するプラグイン「AnimateScroll」を紹介します。
jQueryプラグイン「AnimateScroll」
このプラグインを使えば、ページ内の特定の場所にさまざまなアニメ効果でスクロールすることができます。
- easing：アニメ効果
- scrollSpeed：アニメのスピード
- padding：スクロール先からのパディングを指定
スポンサーリンク
それではデモページをスクロールしてみてください。
デモのソース（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>
スポンサーリンク