時間とともに風景画像の色が変わっていくサンプル001

状況

• headerタグの background-image属性で風景画像がセットされている。

目的

• この風景画像に対して、夕方や夜の効果を与えたい。
• その際、画像の手前にある要素に影響を与えてはいけない。

手法：色の効果

• 要素の背景画像に対して半透明な色を重ねる。
• そのため、その要素と子要素との間に1階層挟む込み、そこに background: rgba() で半透明な色を重ねる。
• ページアクセス時にrgbaを計算させて適用させると、最初から表示されている昼間用画像が急に色味が変わって不自然な印象を与える。これを防ぐため、もう1階層挟み、その階層(div)では画面表示時に黒色をつけて段々その黒色を薄くするCSSアニメーションを付ける。これにより、風景画像の色味がどんな色になる場合であっても不自然な印象を与えない。
• background を直接変更するのでもよいし、CSSのクラスにしておいて、そのクラスを動的に適用してもよい。
• 現時点では、window.onload イベントで現在の色を取得し、3秒掛けてその色に変化するようにしてある。ウィンドウを開いたままにしても、リアルタイムで色が変わっていくようなことはしていない。

手法：時間の判定

• Moment.js を使っている。
• 朝（昼間）が始まる時間、夕方が始まる時間、夜が始まる時間を季節によって調節し、あとは現在時刻と比較する。
• リアルタイムで色を変えていく場合は、window.requestAnimationFrame を使用する。

メモ

• もう少しシンプルな方法を知りたい。

ソースコードはこちら

• laboradian/image-changes-according-to-time-sample001