一瞬背景色(background-color)をピカッとフラッシュさせたい!CSSとJavascript初心者の勉強

Javascriptで簡単なゲームを作ってみているのですが、一瞬背景色をピカッとフラッシュさせたいことがありました。
調べてみると色々な方法があったので、まとめてみます。

CSSのみで行う方法は以下にまとめています。

クリック時にフラッシュ(Javascript and CSS)

CSSとJavascriptを使って、フラッシュさせます。

DEMO

See the Pen by Nakamoto (@programmerlife) on CodePen.

HTML

<div class="bg"></div>
<button class="btn">Button</button>

CSS

*{
    margin:0;
}
.bg{
    position: absolute;
    background-color:#4169e1;
    width:100%;
    height:100%;
}
.btn{
    position: absolute;
    top:10px;
    left:10px;
}
.flash{
    background-color:#879bd8;
}

Javascript

document.querySelector(".btn").onclick = function () {
    const bg = document.querySelector(".bg");
    bg.classList.add("flash")
    // 50ミリ秒後に外す
    setTimeout(function() {
        bg.classList.remove('flash');
    }, 50);
};

jQueryでフラッシュ

See the Pen by Nakamoto (@programmerlife) on CodePen.

HTML

<div class="bg"></div>
<button class="btn">Button</button>

CSS

*{
    margin:0;
}
.bg{
    position: absolute;
    background-color:#4169e1;
    width:100%;
    height:100%;
}
.btn{
    position: absolute;
    top:10px;
    left:10px;
}

jQuery

$(".btn").on("click", function () {
    $(".bg").fadeOut(50).fadeIn(50).fadeOut(50).fadeIn(50);
});

おわり

動きをつけるのも慣れてくると色々できて楽しいですね。

参考サイト

https://www.codegrepper.com/code-examples/javascript/jquery+flashing+background+color