ONE ssss: CODE : Auto Overlay Animation depend on time

.layer_bg{position:fixed; width:100%; height:100%; background: rgba(0,0,0,0); left:0; top:0;color:black;}
.layer_wrap{position:fixed; width:300px; height:100px; background:transparent; text-align: center; margin-bottom:30%;color:black;}

</style>

</head>

<body >

</script>

<div class="layer_bg" id="flbg" style="display:none;"></div>
 
            <div class="layer_wrap"  id="flwr" style="display:none;" layer="1">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVk71xDOQjglJ4CJnKA-n3qQ64b4r3MAsxRiWlamlyiMJgu1vYQE1rpdL6sqNh72wu8HwwPPAVIy5XIAB1B_VbdOt7wiZTAEiC5o7qJ0fVkwZf6DbGXj7E3NKRk133tZG9SOI7UH7uxANOUAvlB3F6n_AJpeL1lrRMFFAyJHkmA6Y5lKle-dkc8Ix_1Q/s320/flower.png">
            
            <a href="javascript:;" class="btn_close">Close</a><br/>
           
            </div>

$(function () {

$(".layer_bg, .layer_wrap").hide();

function layer_position(){
    var win_W = $(window).width();
    var win_H = $(window).height();
    $(".layer_wrap").css({'left':(win_W-300)/2, 'top':(win_H-100)/2});
  };

function layer_open(no){
    $(".layer_wrap[layer="+no+"]").fadeIn();
    $(".layer_bg").fadeIn();
    layer_position();

$(".layer_bg").click(function (e) {
      if(!$(".layer_wrap").has(e.target).length){
        layer_close();
      };
    });
  };

function layer_close(){
    $(".layer_wrap, .layer_bg").fadeOut();
  };

$(".btn_layer").click(function () {
    var no = $(this).attr("layer");
    layer_open(no);
  });

$(".btn_close").click(function () {
    layer_close();
  });

$(window).resize(function () {
    layer_position();
  });
})
</script>

</body>
</html>

CODE : Auto Overlay Animation depend on time

Loading...