2010年10月6日水曜日

Smooth Scrollのブログパーツ作りました

このエントリーをはてなブックマークに追加

こりずにブログパーツを作りました

といっても、某有名なSmooth Scrollスクリプトを丸パク(略
ま、どこかで見たコードだなぁと思っていただければ幸いです。

ダウンロード&デモ

ダウンロードはこちらからお願いします。(新しいタブまたはウインドウが開きます)
http://sites.google.com/site/mksdcom/Home/smooth.js
デモページはこちら(新しいタブまたはウインドウが開きます)
http://tunsns.net/smooth_test.html

ライセンス

ライセンスはPublic Domainです。
いつものごとく。
商用利用・非商用利用問わずお使いください。

サポートブラウザ

Opera 9.5+
Google Chrome 5.0+
Firefox 3.5+
Safari 4.0+
IE 6.0+
Firefoxの3.0でも動くかもしれませんが、手元にない為、確認出来ていません。


使い方

こんなHTMLを指定すればOKです。
<a href="#target">go to target</a>
いろんなコンテンツ
<div id="#target">contents</div>
aタグのhrefに移動させたいnodeのIDを指定してください。

コード解説

パクったとか書きましたが、実は自分なりに工夫してる箇所があります。
そのコードは、下記の箇所。
var remain = firstEnd < firstStart ? -1 : 1; //up : down
    function smooth(start,end){
      if( (remain<0 && start >= end) || (remain>0 && start <= end) ){
        start = (19*start+end)/20 + remain; //It's Cool! :)
        win.scrollTo(0,start);
        win.setTimeout( function(){ smooth(start,end); }, 10 );
      }else{
        win.scrollTo(0,end);
        return;
      }
    }
    smooth(firstStart,firstEnd);

It's Cool! :)と自作自演をしてるように、この部分の計算式が無茶苦茶優秀です。
もう少し速度を上げたい人は19と20の所を、9と10にすれば良いですし、遅くしたい人は29と30にすれば良いです。
この計算式一つで上下への移動距離をキチンとたたき出しているのが、我ながら良いコードだと思います。
テクニカルすぎてアレだという意見が多数見られますが、やっぱり、やるからには徹底的にが僕のモットーなので。
もっと良い書き方がありましたら、教えてください。

以上です。

0 件のコメント :

コメントを投稿