ロゴと背景画像を順番にフェードインで表示させたい。

前提・実現したいこと

メインビジュアル部分で、以下のような動きをつけたいです。

『ロゴが先にフェードイン表示→ロゴの後ろの背景も遅れて数秒後にフェードイン表示』

みたいな感じにしたいです。
恐らくtimeoutなどを使うかと思いますが、色々と試してたりして何度やってもうまく行きません。。。

どうかアドバイスお願いいたします。

html

<section class="mainvisual">
<div class= "mainvisual-inner">

  <div class="mainvisual-logo">
    <img src="img/logo.png">
  </div><!--mainvisual-logo-->

</div><!--inner-->
</section><!--mainvisual-->

css

.mainvisual {
  background-color: black;
}

.mainvisual-inner {
  background-image: url("../img/mainvisual.png");
  background-repeat: no-repeat;
  width: 100%;
  background-size: cover;
  margin: 0 auto;
  background-position: fixed;
  /* 背景の位置指定 */
  position: relative;
}

.mainvisual-inner:before {/*薄暗いグラデーションカバー*/
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

.mainvisual-logo {
  height: 100%;
  position: relative;
}

.mainvisual-logo img {
  width: 270px;
  height: 360px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

試したこと

以下のjqueryでは、ロゴと背景画像が同時にフェードインされます。
これを、ロゴが先にフェードイン→ロゴを表示したまま後ろの背景も遅れてフェードイン

みたいな感じにしたいです。

    $('.mainvisual-inner').append('<div id="curtain">');

    // 追加したdivを塗りつぶしてから透明化アニメーション
    $('#curtain').css({
        position: 'absolute',
        left: 0, top: 0,
        width: '100%', height: '100%',
        backgroundColor: '#fff',
        opacity: 100
    }).animate({
        opacity: 0
    }, 3000, function () {
        // アニメーション終了後に自身を消す
        $(this).remove();
    });

});

どうかアドバイスお願いいたします！

Lhankor_Mhy

2020/06/09 05:08

「後ろの背景」とは、.mainvisual-inner:beforeのことですか？

codemanvs

2020/06/09 05:10

いえ、.mainvisual-innerのことです! mainvisual-inner:beforeは背景画像の上に被さっている薄暗いレイヤーになります。すみません記載しておらず。

Lhankor_Mhy

2020/06/09 05:33

ご提示のコードを試してみましたが、「順番に」以前に、フェード部分が動作しませんでした。 https://jsfiddle.net/Lhankor_Mhy/72ucrv59/ 見た感じ、CSSに不足があるのではないかな、と感じました。

codemanvs

2020/06/09 05:45

何故でしょう。。。こちらでは動いています...

Lhankor_Mhy

2020/06/09 05:48

実際のコードと違う点があればご指摘ください。

codemanvs

2020/06/09 05:49 編集

https://jsfiddle.net/mLg490fz/8/ こちら修正しましたので確認お願いします！

Lhankor_Mhy

2020/06/09 06:38 編集

SCSSのコンパイルエラーが出ているようです。 CSSがこの状態でよいのであれば、ご回答を作ってみたいと思います。

codemanvs

2020/06/09 06:52

はい、問題ないです!

行動規範の内容に同意します

回答1件

ベストアンサー

サンプル

js
1$(function () {
2    // bodyにdivを追加
3$('.mainvisual-inner').append('<div id="curtain">');
4$('.mainvisual-logo').append('<div id="curtain2">');
5    // 追加したdivを塗りつぶしてから透明化アニメーション
6    var curtain = $('#curtain').css({
7        position: 'absolute',
8        left: 0, top: 0,
9        width: '100%', height: '100%',
10        backgroundColor: 'black',
11        opacity: 100
12    });
13    var curtain2 = $('#curtain2').css({
14        position: 'absolute',
15        left: 0, top: 0,
16        width: '100%', height: '100%',
17        backgroundColor: 'black',
18        opacity: 100,
19        zIndex: -1,
20    });
21    curtain.animate({
22        opacity: 0
23    }, 2000).promise().then(function(){
24        curtain2.animate({
25            opacity: 0
26        }, 2000)
27    });
28});