ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

ユーザ設定でアニメーションの有無を変える?「prefers-reduced-motion」の紹介!

f:id:win-friendof:20190512162709p:plain

今回はユーザが設定をするだけでアニメーションの有無を切り替えできるメディアクエリを紹介します!これは先日リリースされたGoogle Chrome 74でも実装されたものになります!ちなみにFireFoxなどではすでに実装されていましたね。

 

この機能はユーザ側のPCに設定されている視差効果の有無を取得してスタイルを当てていくメディアクエリになります。

 

「prefers-reduced-motion」の使い方

それでは、実際に使ってみましょう!!

といっても簡単で、CSS上に以下のように記述するだけです。

  @media (prefers-reduced-motion: reduce) {
    .reduce {
      animation: none;
    }
  }

この例で言うと、「reduce」クラスをアニメーションしている要素につけるとユーザ設定でアニメーションの有無を制御できるようになります。

勘の良い方は気付いたかもしれないですが、アニメーション以外でも設定可能です!

 

じゃあユーザ設定ってどうやるの!?

続きはこちらから!

ユーザ設定でアニメーションの有無を変える?「prefers-reduced-motion」の紹介!

今回はユーザが設定をするだけでアニメーションの有無を切り替えできるメディアクエリを紹介します!これは先日リリースされたGoogle Chrome 74でも実装されたものになります!ちなみにFireFoxなどではすでに実装されていましたね。

 

この機能はユーザ側のPCに設定されている視差効果の有無を取得してスタイルを当てていくメディアクエリになります。

 

「prefers-reduced-motion」の使い方

それでは、実際に使ってみましょう!!

といっても簡単で、CSS上に以下のように記述するだけです。

  @media (prefers-reduced-motion: reduce) {
    .reduce {
      animation: none;
    }
  }

この例で言うと、「reduce」クラスをアニメーションしている要素につけるとユーザ設定でアニメーションの有無を制御できるようになります。

勘の良い方は気付いたかもしれないですが、アニメーション以外でも設定可能です!

 

じゃあユーザ設定ってどうやるの!?

続きはこちらから!

令和カラーは「梅」「菫」「桜」の3色に決定!?

日本流行色協会が「令和 慶祝カラー」として「梅」「菫」「桜」を選定したと発表しました!!巷では「令和!」「れいわ!!」と騒いでいますが、ここでも令和なんですね(笑)新時代を迎えた今、令和カラーをモチーフにしたデザインを創ってみるのも素敵かもしれないですね!!

f:id:win-friendof:20190505120233j:plain

「令和 慶祝カラー」は、令和が「万葉集」の梅花の歌32首の序文をもとに選ばれたことから、春の訪れを知らせる日本の代表的な花にちなんで選定されたそうです!

たしかに「梅」「菫」「桜」の3色はなんとなく春っぽいですよね!!(特に桜)

 

続きを見る