ONE ssss: Edge Animation 1 (peek)

<style>

.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>

</script>

$(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>

Edge Animation 1 (peek)

Loading...