How to pause website from visitors for sometime
Why should I use it ?
- When you are updating your website
- When you are getting fake ads click
- When you are working on templates coding section
CSS Code: Just copy and paste in your website template css section
<style>
html {
pointer-events: none;
}
.move-area{/*normally use body*/
width: 100vw;
height: 100vh;
padding: 10% 45%;
}
.con1{
width: 100%;
}
.eye {
position: relative;
display: inline-block;
border-radius: 50%;
height: 30px;
width: 30px;
background: #CCC;
}
.eye:after { /*pupil*/
position: absolute;
bottom: 17px;
right: 10px;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
content: " ";
}
</style>
Script Code: Just copy and paste in your website template script section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).mousemove(function(event) {
var eye = $(".eye");
var x = (eye.offset().left) + (eye.width() / 2);
var y = (eye.offset().top) + (eye.height() / 2);
var rad = Math.atan2(event.pageX - x, event.pageY - y);
var rot = (rad * (180 / Math.PI) * -1) + 180;
eye.css({
'-webkit-transform': 'rotate(' + rot + 'deg)',
'-moz-transform': 'rotate(' + rot + 'deg)',
'-ms-transform': 'rotate(' + rot + 'deg)',
'transform': 'rotate(' + rot + 'deg)'
});
});
</script>
HTML Code: Go to blogger Layout section and create a new widget HTML section and paste into it.
<div style="background: #3939396e;height: 100%;position: fixed;top: 0;width: 100%;left: 0;z-index: 999999999;text-align: center;color: red;">
<div style="background:#ffffff9c;margin-top: 250px;">
Site under updating process - <br />
***Please wait while uploading***
<div class='con1'>
<div class='eye'></div>
<div class='eye'></div>
</div>
</div>
</div>
Live Preview
Post a Comment