:zeroviewを公開しました
Safari、iCab、OmniWeb、シイラなどのWebKitを用いているブラウザで使用できるブックマークレット、[0]:zeroviewを公開しました。
[0]:zeroview
ブックマークレットを起動すると、ページ（body要素）を縮小します。
縮小されたページの上にウインドウサイズを示す枠が表示されますので、この枠を見たい場所に合わせてクリックすると、ページの拡大率が元に戻って枠を合わせた位置を表示します。
ブックマークバーの左側に追加すると、Command＋数字キーで起動することができます。tumblrやFlickrなどの縦に長いページのナビゲーションに使うといいかもしれません。
使い方は以下の動画を見てください。
Adobe系アプリケーションのCommand+0が全体表示するところから、[0]:zeroview（ゼロビュー）という名称にしています。
実はこの表示、Nokia E61などのS60 WebKitブラウザにはアニメーションこそないものの、標準搭載されていて、表示領域の小さな携帯電話ではとても重宝している機能です。
技術情報
ページの縮小表示アニメーションにはWebKitで実装されているCSS AnimationCSS Transitionsを用いています。そのため、FirefoxやOperaでは[0]:zeroviewは動作しません。
スクロールが若干もたつきますが、これは通常のJavascriptを用いています。
将来の予定
[0]:zeroviewはiPhone 2.0でもサポートされているCSS AnimationCSS Transitionsによるユーザーインターフェイスのテストと、CSS AnimationCSS TransitionsのバグをAppleに報告するためのサンプルを兼ねて作成したのですが、使ってみるとこれがなかなか気持ちいいので左右の余白スペースに情報表示などを行ってみようかと考えています。
グリモンの勉強にも使ってみようかな。
CSS Animationといい、SQL APIといい、Safari楽しいよ。
追記
ソースを整理して掲載。
CSS AnimationのトリガーをJavascriptで引くには、属性を付与するだけで良い。
javascript: //Variables var target = document.body; var target_height = window.innerHeight; var original_page_height = <del>target.offsetHeight</del><ins>target.scrollHeight</ins>; var original_page_scroll = window.pageYOffset; var orgiginal_page_width = <del>target.offsetWidth</del><ins>target.scrollWidth</ins>; //Calculating scale var target_scale = Math.max(target_height/original_page_height, 0.2); //CSS Animation target.style.webkitTransition = '-webkit-transform 0.5s ease-in'; target.style.webkitTransformOrigin = orgiginal_page_width / 2 + 'px 0'; //Scrolling to top goSmooth = setInterval('go_smooth(0)', 10); setTimeout('stop_scroll\(0\)', 500); //Creating target frame var target_frame = document.createElement('div'); target_frame.style.position= 'absolute'; target_frame.style.width = orgiginal_page_width + 'px'; target_frame.style.height = target_height + 'px'; target_frame.style.top = original_page_scroll + 'px'; target_frame.style.border = 'solid ' + 2/target_scale + 'px rgb(40, 20, 10)'; target_frame.style.backgroundColor= 'rgba(255, 120, 10, 0.2)'; target_frame.style.zIndex = '99999'; target_frame.style.webkitBorderRadius = 5 / target_scale + 'px'; target.appendChild(target_frame); target.Target_frame = target_frame; //Webkit scaling CSS to target frame target.style.webkitTransform = 'scale('+target_scale+')'; //Adding event for recovering normal view target.Target_frame.addEventListener('click', function(e){reset(e, target_scale)}, true); target.addEventListener('mousemove', function(e){moveTarget(e, target_scale);}, true); //Recovering page view style function reset(e, target_scale){ var target=document.body; var scrollY = t_frame=document.body.Target_frame.style.top.replace('px',''); document.body.removeChild(target_frame); //CSS Animation for recovering target.style.webkitTransform = 'scale(1)'; goSmooth = setInterval('go_smooth('+scrollY+')', 10); setTimeout('stop_scroll\('+scrollY+'\)', 500); target.removeEventListener('mousemove', function(e){moveTarget(e, target_scale);}, true ); e.stopPropagation(); } //Target frame mover function moveTarget(e, target_scale){ var page_offset=window.pageYOffset; var t_frame = document.body.Target_frame; var t_frame_height = document.body.Target_frame.offsetHeight; var pageHeight = <del>target.offsetHeight</del><ins>target.scrollHeight</ins>; var topHeight = (e.clientY / target_scale) - (t_frame_height / 2) + (page_offset / target_scale); if(topHeight < 0)topHeight = 0; if( (topHeight + t_frame_height) > pageHeight)topHeight = pageHeight - t_frame_height; t_frame.style.top = topHeight + 'px'; } //Scrolling functions function go_smooth(goal){ var page_offset=window.pageYOffset; var increment = (goal - page_offset) / 50; if(increment > goal){ increment = 0; clearInterval(goSmooth); } window.scrollBy(0, increment); } function stop_scroll(goal){ clearInterval(goSmooth); window.scrollTo(0, goal); }
勘違いしてた
id:vantguardeさんのブクマコメント
すっかり勘違いしてました。CSS TransitionはCSS Animationに含まれるわけじゃないのですね。
CSS Animation
CSS Transitions
というわけで、このページで書いてあるCSS AnimationはCSS Transitionsとなります。
んで、次回アップデートでホンモノのCSS Animationを実装します。