背景色(べた塗り)の後に画像が表示されるアニメーションを作りたい

Question

下記の参考サイトのような画像や文字が表示される前に、その要素に背景色（ベタ塗り）が入るアニメーションを作りたいと考えております。
背景色（ベタ塗り）が表示されたのち、画像もしくは文字に表示が切り替わるようなエフェクトです。

また、スクロールした際に、ブラウザの表示領域にはいったらアニメーションが動くような制御も取り入れたいです。

参考サイト

ご存知の方居られましたらご教授いただきたいです。
お願いいたします。

Comments

[yambejp]

画像を遅延読み込みしたいのでしょうか？
その際背景を黒くして、フェードインする感じですか？

[onakapecomaru]

言葉足らずの質問内容で申し訳ございません。
仰る通りで、背景を黒くしてその後ゆるやかにフェードインして表示できればと考えております。
なにか方法をご存知でしょうか…

Answer 1

こちらが参考になりそうです。

Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる | コリス

ユーザーに優しいローディング画面「スケルトンスクリーン」 - Qiita

Comments

[onakapecomaru]

ありがとうございます。しかしこちらを参考に実装したところ理想に近い状態にはなるのですが、
背景が表示されてから画像が読込される、という簡素な動きだけなので、背景が表示されてから数秒後にゆるやかにフェードインするような動きを付けられればと考えております。

[Lhankor_Mhy]

> 背景が表示されてから数秒後にゆるやかにフェードインするような動き

「フェードイン CSS」でググるといろいろ出てきますよ。