Skip to content

スライドするタブ Oversized Sliding Tabs

Panic - Coda - One-Window Web Development for Mac OS X
ってサイトをご存知でしょうか?
タブデザインが秀逸なサイトなのですが、タブで表示するエリアが
左右にスライド!するのです。

最初見た時は、かっこいいなー。でもCSSとかでブラウザ固有の設定
とかうじゃうじゃじゃないかと思っていてたら、案外簡単だったので報告です。

実は、こんな風になっているのです。
coda_screenshot

あっけないですが、用はスクロールバーを非表示にして
Javascriptで内容をスライドさせていたのでした。

というわけで、サンプルを作って見ました。
Tab Scroll Test

コードですが、HTMlは冗長なので省きます。

JavaScript:
  1. //現在のタブ、タブエリアのid名を保存するための変数
  2. currenttab_name = "tab1";
  3. currentarea_name = "tabarea1";
  4.  
  5. ////スクロール用関数
  6. function Scroll(nextarea_name, clicktab_name){
  7.    
  8.     //tabの色をクリック時に変化
  9.     var clicktab = document.getElementById(clicktab_name);
  10.     clicktab.className = "tab-active";
  11.     var currenttab = document.getElementById(currenttab_name);
  12.     currenttab.className = "tab-noactive";
  13.     currenttab_name = clicktab_name;
  14.    
  15.     ////tabarea移動部分
  16.     var anim = {time:0, start:0, change:750, duration:25}
  17.    
  18.     //現在のタブエリアのoffsetLeftを取得
  19.     var currentarea = document.getElementById(currentarea_name);
  20.     var currentarea_x = currentarea.offsetLeft;
  21.     //それを、スタート地点に設定
  22.     anim.start = currentarea_x;
  23.    
  24.     //移動するエリアのoffsetLeftを取得
  25.     var nextarea = document.getElementById(nextarea_name);
  26.     var nextarea_x = nextarea.offsetLeft;
  27.     //差を移動させる値に設定
  28.     anim.change = nextarea_x - currentarea_x;
  29.     //移動後のエリア名を保存
  30.     currentarea_name = nextarea_name;
  31.    
  32.     //タイマーで、エリアを単位ミリ秒毎に移動
  33.     var timer = setInterval(scrollarea, 15);
  34.    
  35.     //移動する値を計算する関数
  36.     //http://www.robertpenner.com/easing/で紹介されている模様
  37.     function sineInOut(t, b, c, d){
  38.         return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
  39.     }
  40.    
  41.     //移動用関数
  42.     function scrollarea(){
  43.         if(anim.time>= anim.duration){
  44.             clearInterval(timer);
  45.         }
  46.         var area = document.getElementById("content");
  47.         area.scrollLeft = sineInOut(anim.time, anim.start, anim.change, anim.duration);
  48.         anim.time = anim.time + 1;
  49.     }
  50. }

胆は、タイマーを使って単位時間当たりに移動させている点です。
ただこれだけだと、ややぎこちないため、アニメーションなどで
用いられる移動値の計算方法を応用している模様です。

この部分

JavaScript:
  1. //移動する値を計算する関数
  2. //http://www.robertpenner.com/easing/で紹介されている模様
  3. function sineInOut(t, b, c, d){
  4.     return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
  5. }

コード内には、他にもこんな関数のサンプルが入っています。
びよーんと移動して戻ってきたりとか色々出来るようです。
この計算方法自体はhttp://www.robertpenner.com/easing/
にて、公開されているもののようですが、FancyZoom.jsとなっている
jsのコード自体は商業利用の場合、有償ライセンスのようです。

3 Comments

  1. Channon wrote:

    Good for people to know.

    水曜日, 10月 29, 2008 at 10:36:46 | Permalink
  2. Exactly where can I contact your organization if I want some assist?

    水曜日, 7月 24, 2013 at 18:56:54 | Permalink
  3. Amy Waye wrote:

    Excellent post. I absolutely appreciate this website. Thanks!

    火曜日, 7月 30, 2013 at 17:50:27 | Permalink

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*