スクロールしたら背景が出てきて、徐々に画像が表示されるようなアニメーションを作りたい

Question

お世話になっております。
以下ののサイトのように、スクロールして画像や文字が出現する際に、
先に白背景が現れた後に要素（画像）が上から塗られるように出現させるアニメーションはどうやってやっているのでしょうか？
正式なアニメーション名がわからないため、このような呼んでいます。

https://editions-life.jp/

おそらく画像の上に重ねる要素を疑似要素で作成しているかと思うのですが、
コンテンツを見えないように透過させ、transitionでアニメーションしてみたりなど
いろいろ試行錯誤しているのですが、ふわっとフェードインするようなアニメーションを作ることはできました。

また以下のような灰色背景が先に表示されて後を追うようにめくれて画像が表示されるアニメーションを実装することもできました。
https://command-d.com/

しかしサイトと同じようなきれいなアニメーションを実装することはできず、悩んでいます。

なるべく具体的に教えていただけると幸いです。
よろしくお願いいたします。

該当のソースコード

<div class="mask">
   <figure><img src="./img/img_01.png"></figure>
</div>

.mask {
  position: relative;
  width: 80%;
  margin: 30px auto 30px;
  .mask-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #10404c;
  }
}

//要素の取得とスピードの設定
var box = $('.mask'),
    speed = 700;

box.each(function(){
    $(this).append('<div class="mask-bg"></div>')
    var maskbg = $(this).find($('.mask-bg')),
    image = $(this).find('img');
    var counter = 0;

    image.css('opacity','0');
    maskbg.css('width','0%');
    //inviewを使って背景色が画面に現れたら処理をする
    maskbg.on('inview', function(){
        if(counter == 0){
　　　　　$(this).delay(200).animate({'width':'100%'},speed,function(){
                   image.css('opacity','1');
                   $(this).css({'left':'0' , 'right':'auto'});
                   $(this).animate({'width':'0%'},speed);
                })
            counter = 1;
          }
     });
});

Comments

[Lhankor_Mhy]

「同じようなきれいなアニメーションを実装することはできず」とのことですが、実際には何が起きているのかご提示ください。
なるべく具体的にお願いします。

[onakapecomaru]

白背景が出た後に、上から画像が表示されるようにしているのですが
今のままでは少しでも画像が表示された時点で見えてしまいますので、
最初は透明でだんだんと不透明になっていくようにしたいのです。

[Lhankor_Mhy]

現状のコードをご提示ください。

[onakapecomaru]

遅くなり申し訳ございません。
追記しました。
プラグインのinview.jsを使って、“スクロールして画面に現れたら”という条件で起動させています。

[Lhankor_Mhy]

ありがとうございます。
下記の回答の通りでいいと思います。

[onakapecomaru]

出来ました。大変助かりました
ちなみに別の画像を縦並びに配置し、同様にスクロール量が規定に達したところで発火させたいのですが、
要素を<div id="target">で括る以外にいい方法はないでしょうか、要素の数が増えた場合なるべく簡潔にまとめたいのですが

[Lhankor_Mhy]

どうぞ。
https://jsfiddle.net/Lhankor_Mhy/ob0ykm6t/2/

ただ、CSSの問題ですので、inview.js でも普通に使えるはずです。
maskbg.on('inview', function(){
$(this).addClass('active')
みたいな。

[onakapecomaru]

inviewでも使うことができました、ありがとうございます。
何度もリンクまでご用意いただきありがとうございます。
さらに要素の最下部まで到達したタイミングで出来ればと思うのですが、ご教授いただければ幸いです。

Answer 1

こんにちは。

透明→背景色のグラデーションを上からかぶせて、それを移動するアニメーションをするのはいかがでしょうか。

サンプル

div{
  position: relative;
  width: max-content;
  overflow: hidden;
}
div::before{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 200%;
  background: linear-gradient(white 70%, transparent 100%);
  transition: 1.5s;
}
div.active::before{
  transform: translateY(-100%);
}