QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Creating A Simple Backdrop Effect

Creating A Simple Backdrop Effect

backdrop

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.


View Demo


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>

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.

May 26, 2014Narayan Prusty
SEO Pagination Best Practices and Friendly URLsOverview Of Redis Architecture

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Color Selection Techniques For Websites
  • How To Detect Element Entered Viewport
  • Create Raining Effect using JavaScript
  • Change Navigation Style On Scroll
  • JavaScript Change Console Log Color
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license