pinch-zoom-element

Jakeとチームは、ブラウザ独自のピンチズームのダイナミクス以外のHTMLのセットでピンチズームを管理するための、このかなり素晴らしいカスタム要素を構築しました(モバイルビューポートズームを考えてください)。この要素は、Chrome Dev Summitで構築およびリリースしたsquooshアプリに必要な中心的コンポーネントの1つでした(...「Chrome Dev Summitでリリース」と言いますsquooshは、China Google Developer Dayですべてのユーザーに公開しましたチームの他のメンバーが通商禁止になっていたとしても;)...)

install: npm install --save-dev pinch-zoom-element

<pinch-zoom>
  <h1>Hello!</h1>
</pinch-zoom>

Read full post

私はちょうどそれを私のブログに加えました(ほんの数分かかりました)、あなたは私が撮った写真を共有する私の「 life 」セクションでそれをチェックすることができます。タッチ対応デバイスを使用している場合は、複数の指の入力を処理できるトラックパッドを使用している場合は、要素をすばやくピンチズームできます。

この要素は、Webコンポーネントがユーザーインターフェイスコンポーネントを作成するためのモデルとして好きな理由の良い例です。 pinch-zoom要素は、ワイヤ上でわずか3kb(圧縮されていない)で最小限の依存関係にあり、使いにくくなるようなカスタムのアプリケーションレベルのロジックを束縛することなく、1つの仕事を非常にうまく行っています。 vs Squooshアプリから学んだことに基づいて共有するアプリロジックコンポーネント。

たとえば、この要素が多くのコマースサイトで見られる画像ズーム機能を置き換えたり標準化したりして、開発者からその苦痛を永遠に取り去ることができると私は想像できるでしょう。

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.