多くの場合、Webアニメーションは議論の源です。不十分なアニメーションは驚くほど明白ですが、よくできたアニメーションはユーザーエクスペリエンスにシームレスに融合します。効果的なアニメーションは、ウェブサイトを強化し、性格を追加したり、認知負荷を減らすための視覚的な手がかりを提供したりします。ただし、一般的な誤解は、アニメーションに対してアクセシビリティをピットします。これは不要です。思慮深いデザインは両方を可能にします。
アニメーションを設計する際には、これらの重要な質問を検討してください。
遊び心のあるアニメーションは個人のポートフォリオに適していますが、税務申告サービスなどのタスク指向のサイトには不適切です。ただし、進行状況バーは貴重な視覚的フィードバックを提供します。
重要な情報を損なう過度に忙しいアニメーションを避けてください。コンテンツに近いアニメーション化されたテキストまたはループアニメーションは、ADDまたはADHDを使用してユーザーにとって特に気を散らすことができます。優れたアニメーションはフォーカスを強化し、それを混乱させません。
したがって、アニメーションは初期テストに合格します。次は何ですか?
アニメーションは、モーション感度を持つユーザーに配慮する必要があります。前庭障害は、めまいや吐き気を引き起こす可能性があります。
prefers-reduced-motion
メディアクエリは、最小限のアニメーションのユーザー設定を検出します。このコードスニペットは、すべてのCSSアニメーションとトランジションを無効にします。
<code>@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }</code>
これは広いアプローチです。より洗練されたソリューションテーラーは、おそらく複雑な遷移の代わりに単純な不透明なフェードを使用して、モーション効果を減らしました。
prefers-reduced-motion
メディアクエリは、javascriptでも機能します。
let motionQuery = matchmedia( '(recreter-reduced-motion)'); const handlereducemotion =()=> { if(motionquery.matches){ //モーションオプションの削減 } } MotionQuery.AddListener(ハンドラードゥクモーション); Handlereducemotion()
ただし、システムの設定のみに依存することは、絶対確実ではありません。 UIトグルは、ユーザーが直接制御を提供します。
スクロールトリガーアニメーションは創造的な可能性を提供しますが、ユーザーエクスペリエンスに悪影響を与える可能性があります。調査によると、ユーザーは遅い負荷時間を入学アニメーションと混同し、遅延が認識されます。
GreensockのScrolltriggerプラグインは、これに対処するためのfastScrollEnd
を提供します。高いスクロール速度を検出し、アニメーションをスキップして、応答性の高いエクスペリエンスを確保します。 ScrolltriggerのmatchMedia()
は、削減されたモーションに優しいスクロールアニメーションの作成も簡素化します。
包括的で楽しいユーザーエクスペリエンスの目的、共感、責任あるアニメーションの実践を優先します。
以上が共感的なアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。