First we'll set up a class toggling function on our DOM so when the window becomes blurred and focused the classes can be applied.
function onBlur() {
document.body.className = 'blurred';
};
function onFocus(){
document.body.className = 'focused';
};
window.onfocus = onFocus;
window.onblur = onBlur;
Because our overlay is going to be transparent when the Window is active we'll want to add a pointer-events property and set it to none so the overlay has no impact on elements below.
body:before{
content: "";
background-color:rgba(0,0,0,0.9);
display:block;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
opacity:0;
transition:all 0.4s;
z-index: 999999;
pointer-events:none;
}
body:after{
content: "2615 We'll be right here when you are ready.";
color:rgba(255,255,255,0.7);
font-family:helvetica;
font-size:32px;
line-height:32px;
display:block;
position:fixed;
width:100%;
text-align:center;
top:50%;
transform:translateX(-100%);
transition:all 0.8s;
z-index: 9999999;
pointer-events:none;
}
body.blurred:before{
opacity:1;
}
body.blurred:after{
transform:translateY(0%);
}
You can see this CSS in action by clicking into your browser's address bar. When the address bar receives focus, the onblur event is triggered which toggles the class on the <body> tag in our page.