最近縦長のサイトが増えてきており、

体外そういうサイトは、ページ内リンクのスクロールに

アニメーション効果がされていることが多いかと思います。

そのアニメーション効果は基本的には変わらないので、

なにか面白い動きができないものかと思い、

jQueryのプラグインのjQuery Easing Plugin のイージング効果を利用しよう！

と思い、いろいろと試してみました。

その結果、

本家のサイトにも試せるものはありますが、

どれかひとつだけしか試せないのもなんなので、選べるようにしました。

スピードも調節できます。

デモは下記リンクから

DEMO

違いがわからない動きが多いですね。。。

ものによっては、ものすごい効果のもありますね?

イージング効果を付ける方法を説明します。

XHTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js"></script>

1 2	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js"></script>

 

基本的には、jquery.easing.1.3.jsを読み込めばOKです。

（jqueryはもちろん必要です。）

 

あとは、アニメーションスクロールのスクリプトのanimateを以下のように設定すればOKです。

JavaScript

$('a[href^=#]').click(function() { var speed = 1000; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, { duration: speed, easing: 'ここに効果名を入れる' }); return false; });

1 2 3 4 5 6 7 8

$('a[href^=#]').click(function() {       var speed = 1000;         var href= $(this).attr("href");       var target = $(href == "#" || href == "" ? 'html' : href);       var position = target.offset().top;       $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, { duration: speed, easing: 'ここに効果名を入れる' });       return false;    });

 

なにかおもしろい動きをつけるとちょっと印象には残りますよね。

これからどんどん動きのあるサイトは増えてくるとおもいますので、

その中でどれだけ「ユーザーの記憶に残る」ことができるか、

そのような工夫をしていかなければと思う今日この頃です。