スライドショー、フェードデザインのカスタマイズについて

Question

https://shinsoken.jp/

上記のサイトのトップページのスライドショーのように、フェードのなかで一瞬白くなるように実装したいです。

ただのふわっとするフェードならできるのですが、白くするやり方が分かりませんでした。

すみませんが、どなたか教えていただきたいです。

★自力で調べたこと

「transition」の「transform」や「cubic-bezier」、「opacity」が関係しているのでは？というところまでたどり着きました。
しかし、その先がわかりませんでした。

Comments

[1T2R3M4]

https://ja.stackoverflow.com/questions/77402

以下ご対応ください。
https://teratail.com/help#posted-otherservice

[MAGARA]

すみません、認識不足でした。同じ質問をしてしまいました。

https://ja.stackoverflow.com/questions/77402

削除できないので上記リンクを追加します。

Answer 1

たとえば

<script>
$(function(){
  $('#btn').on('click',function(){
    $('<div id="overlay-front">').css({background:"red",position:"absolute",width:"100%",height:"100%",top:0,left:0,"z-index":99}).appendTo('body');
    $('#overlay-front').fadeOut(1000).queue(function(){
      $(this).remove().dequeue();
    });
  });
});
</script>
<input type="button" value="btn" id="btn">

Comments

[MAGARA]

ご丁寧にありがとうございます。

大変申し訳無いのですが、

https://hikarutest.space/

のサイトのスライドショーのフェードを

https://shinsoken.jp/

のように「一瞬白く」する場合はどのようにしたら良いのでしょうか？

[MAGARA]

もしかしたらコールバック関数のbeforeChangeやafterChangeが関係しているのかもしれない…というところまではたどり着きました。

[yambejp]

例示したものでは動作が確認できないということですか？？
まるっとコピペで動かすならこれで・・・

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('<div id="overlay-front">').css({background:"white",position:"absolute",width:"100%",height:"100%",top:0,left:0,"z-index":99}).appendTo('body');
$('#overlay-front').fadeOut(2000).queue(function(){
$(this).remove().dequeue();
});
});
</script>
test

[MAGARA]

確認できました。
ご丁寧にありがとうございます。