A lot of web design frameworks like LightBox and Bootstrap use backdrop effects. Backdrop effects can also be used to force a user to look at a particular portion of your website. Creating a backdrop effect is very simple. In this article I will provide the simplest way to create a backdrop effect.
Implementing Backdrop Effect Using JavaScript
<!doctype html>
<html>
<head>
<title>Simple Backdrop</title>
<style>
div
{
background-color: yellow;
color: green;
}
</style>
</head>
<body>
<div onclick="backdrop(this)">
Click On This Block To Highlight It Or Remove Highlighting.
</div>
</body>
<script>
var highlight = false;
var cover = null;
function backdrop(element)
{
if(highlight == false)
{
/*Create a transparent cover for the viewport*/
cover = document.createElement("div");
cover.style.height = "100%";
cover.style.width = "100%";
cover.style.backgroundColor = "black";
cover.style.opacity = "0.8";
cover.style.position = "fixed";
cover.style.top = "0px";
cover.style.left = "0px";
cover.style.zIndex = "1";
document.body.appendChild(cover);
/*Element has to be positioned so that we can apply z-index css property on it.*/
element.style.position = "relative";
element.style.zIndex = "2";
highlight = true;
}
else
{
document.body.removeChild(cover);
highlight = false;
element.style.zIndex = "0";
}
}
</script>
</html>
<html>
<head>
<title>Simple Backdrop</title>
<style>
div
{
background-color: yellow;
color: green;
}
</style>
</head>
<body>
<div onclick="backdrop(this)">
Click On This Block To Highlight It Or Remove Highlighting.
</div>
</body>
<script>
var highlight = false;
var cover = null;
function backdrop(element)
{
if(highlight == false)
{
/*Create a transparent cover for the viewport*/
cover = document.createElement("div");
cover.style.height = "100%";
cover.style.width = "100%";
cover.style.backgroundColor = "black";
cover.style.opacity = "0.8";
cover.style.position = "fixed";
cover.style.top = "0px";
cover.style.left = "0px";
cover.style.zIndex = "1";
document.body.appendChild(cover);
/*Element has to be positioned so that we can apply z-index css property on it.*/
element.style.position = "relative";
element.style.zIndex = "2";
highlight = true;
}
else
{
document.body.removeChild(cover);
highlight = false;
element.style.zIndex = "0";
}
}
</script>
</html>
Here we made a cover and layered it over the webpage. Now we moved the element(which was need to be highlighted) above the cover. This is the simplest way of creating a backdrop effect.
@narayanprusty
Leave a Reply