scribdはズーミングをどのように実装していますか？

Question

Scribdのズーム機能は非常に印象的です。画像とテキストを含むすべてのページコンテンツは、+ボタンと - ボタンをクリックすると比例して拡大されます。

たとえば、http://www.scribd.com/html5で試してみてください。

これはどうしますか？ブラウザーのズームを制御するのと同じくらいシンプルではないようです（ブラウザーのズーム自体を制御できないのは簡単ではありませんが、単純ではありません）。

関連する質問は「フルスクリーンモード」の実装方法です。この質問はasked beforeでしたが、2年前にもFlashを使用していました。

Answer 1

私はそれがcanvas要素の単純な変換かもしれないことを示唆していますが、ソースを見ると、これは当てはまりません。

は代わりに、それは「ズームイン」機能のように見えるだけのページにimgタグに影響を与えますので、私はおそらく、彼らは単に動的にこれらのタグのためのwidthとheight属性を変更していることを言うと思います。非常に洗練されたアプローチではなく、HTML5で導入されたものにはまったく依存しません。

編集：

Chromeの開発ツールは優れています。ズーム間でDOMを観察すると、エフェクトの実装方法を簡単に特定できます。ここでは、マークアップがページのデフォルトの状態で次のようになります。

<div class="outer_page only_ie6_border" id="outer_page_1" 
    style="width: 516.8000000000015px; height: 400px; "> 
     <div class="newpage" id="page1" 
      style="width: 902px; height: 697px; 
       -webkit-transform: scale(0.5729490022172966); 
       -webkit-transform-origin-x: 0%; 
       -webkit-transform-origin-y: 0%; "> 
     ... 
</div> 
</div> 

...と一度ズームアウト後：

<div class="outer_page only_ie6_border" id="outer_page_1" 
    style="width: 646.0000000000018px; height: 500px; "> 
     <div class="newpage" id="page1" 
      style="width: 902px; height: 697px; 
       -webkit-transform: scale(0.7161862527716206); 
       -webkit-transform-origin-x: 0%; 
       -webkit-transform-origin-y: 0%; "> 
     ... 
</div> 
</div> 

...と再びズームアウト後：

<div class="outer_page only_ie6_border" id="outer_page_1" 
    style="width: 807.5000000000023px; height: 624px; "> 
     <div class="newpage" id="page1" 
      style="width: 902px; height: 697px; 
       -webkit-transform: scale(0.8952328159645258); 
       -webkit-transform-origin-x: 0%; 
       -webkit-transform-origin-y: 0%; "> 
     ... 
</div> 
</div> 

それで、彼らは2つのことをしてズーム効果を実装したようです：

1. コンテナdivのwidthとheightを増やしてください。
2. webkit-transform CSSプロパティを使用して、コンテンツを必要に応じて拡大または縮小します。