モーションピクチャーテクニックを削減し、2つ取る

で要素を使用するためのきちんとしたテクニックを見て、好みの還元運動メディアクエリに基づいてアニメーション画像を提供しますか？

ニュースレターでそれを共有した後、マイケル・ゲールから興味深い返信が得られました。

アニメーションGIFを愛しているが、UIがあちこちにズームすることを望まなかった人はどうですか？彼らは今、コンテンツとUIのどちらかを選択することを余儀なくされていますか？

それはかなり興味深い質問だと思いました。

また、私がMP4についてよくトリガーされていますか？！領土、私は動画がGIFよりもウェブ上のすべての方が良いと確信しているからです。結局のところ、一部のブラウザは要素内でビデオをサポートしており、信じられないかもしれませんが、そのためにフォールバックを書くことができます。

これらすべてのものを組み合わせることで亀裂を取りましょう。

MP4ソースの追加

簡単なのは、ビデオで追加のを追加することです。つまり、3つのソースメディアファイルが必要です。

1. 還元運動を好む場合のアニメーションされていないグラフィックが減少します。
2. デフォルトとしてアニメーションGIF。
3. フォールバックがサポートされている場合、GIFを置き換えるMP4ビデオ。

例えば：

 <picture>
  <source srcset="static.png" media="（reduced-motion：reduce）"> </source>
  <source srcset="animated.mp4" type="video/mp4">
  <img srcset="animated.gif" alt="animated image">
</source></picture>

Chromeのデフォルト条件下では、GIFのみがダウンロードされて表示されます。

Safariのデフォルト条件下では、MP4のみがダウンロードされて表示されます。

好みの還元運動をアクティブにした場合：ChromeまたはSafariのいずれかで削減します（MACで、システム設定→アクセシビリティ→表示→モーションの削減に移動します）、両方のブラウザは静的PNGファイルのみをダウンロードします。

Firefoxをテストしましたが、機能していないようで、代わりにGIFバージョンをダウンロードし続けています。 Firefoxは、還元運動を好むようですが、おそらく要素ではまだサポートされていないのでしょうか？何があるのか​​わかりません。

単一のアニメーションソースを提供し、そこから他のソースを生成するツールを提供するのはちょっとクールではないでしょうか？私はあなたがそれをCloudinaryのようなもので配線することができるに違いない。

アニメーションバージョンを表示するためにトグルを追加します

Michael Galeが述べたように、Motion Toggleでひっくり返ったからといって、アニメーションバージョンを見ることから完全に締め出されているのは残念です。

JavaScriptを使用してメディアクエリをヤンクし、ブラウザにアニメーションバージョンの表示を強制するを使用するのに十分簡単なはずです。

HTMLでこれを宣言的に行う実用的な方法はないと確信しています。また、このボタンをタグ内に配置することもできません。 は交換された要素ではありませんが、ブラウザはまだ混乱し、気に入らない。代わりに、まったくレンダリングしません。大したことはありません。ラッパーを使用できます。

 <div>
  
  <picture>
     
  </picture>

  <button>アニメート</button>

</div>

画像の上にボタンをどこかに配置できます。これは単なる任意の選択です。あなたが望む場所に置くことも、ユーザーにそれを説明できると思う限り、画像全体をタップ可能にすることもできます。同じメディアクエリが一致している場合にのみボタンを表示することを忘れないでください。

 .picture-wrap .animate-button {
  表示：なし;
}

@media（reduced-motion：reduce）{
  .picture-wrap .animate-button {
     表示：ブロック;
  }
}

ボタンをクリック（またはタップ）したら、アニメーションソースをダウンロードして、メディアクエリを削除してアニメーションを開始する必要があります。

 let button = document.queryselector（ "。animate-button"）;

button.addeventlistener（ "click"、（）=> {
  const parent = button.closest（ "。picture-wrap"）;
  const picture = parent.queryselector（ "picture"）;
  picture.queryselector（ "source [media]"）。remove（）;
}）;

これが行動中です：

多分これは良いコンポーネントですか？

ボタン、ボタンスタイリング、およびWebコンポーネントを使用したボタン機能を自動的に含めることができます。ねえ、どうして？

以上がモーションピクチャーテクニックを削減し、2つ取るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。