easingはjQueryにさまざまなアニメーション効果をつけるためのプラグインです.
→サンプルページ
このサンプルでは,左のナビゲーションをクリックすると,ABOUT, WORKS, CONTACTと移動しますが,その際のアニメーションの効果にeasingのエフェクトを使用しています.いちど多めに移動し戻るような動作をしています.
<script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
使用する際はheadタグの終了直前でscriptタグを使用して記述します.まず1行目で[jquery.min.js](jQuery)を読み込みその後に[jquery.easing.1.3.jp]を読み込み使用する準備が完了します.
<script type="text/javascript"> //起動前の設定// $(document).ready(function(){ $('body').animate({opacity: "0"},0); // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function(){ // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $("html, body").animate({scrollTop:position}, speed, "easeOutBack"); return false; }); }); </script>
つづいてのscriptタグの記述はaタグでid指定している箇所にスクロールアニメーションを行うための記述です.
16行目の末尾”easeOutBack”がeasingの処理になります.この部分に”イージングの処理”を記述して効果を変更していきます.
例:(効果をeaseOutBackからeaseInOutQuadに変更)
$("html, body").animate({scrollTop:position}, speed, "easeOutBack");
↓
$("html, body").animate({scrollTop:position}, speed, "easeInOutQuad");
easingの指定と効果は以下のページで確認してください.
参考ページ:http://semooh.jp/jquery/cont/doc/easing/