マウスカーソルをブラウザのタブに移動させてみてください。
× 閉じる
HTML
<div id="msk">
<div id="mskInner">
<img src="images/cat1.jpg">
<p id="return">× 閉じる</p>
</div>
</div>
CSS
#msk {
width: 100vw;
height: 100vh;
background: #333;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 90;
}
#msk #mskInner {
text-align: center;
}
#msk #mskInner #return {
width: 150px;
margin: 20px auto;
color: #fff;
padding: 15px 0;
border: solid 1px #fff;
cursor: pointer;
}
/*mskInnerの位置調整*/
#mskInner {
position: absolute;
top: -100%;
left: 0;
right: 0;
}
/*マスク非表示*/
#msk {
display: none;
}
/*マスクスイッチ*/
#mskSwitch{
width: 100vw;
height: 200px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
jQuery
$(function () {
$('#mskSwitch').on('mouseover', function () {
$('#msk').fadeIn(200);
$('#mskInner').delay(200).animate({
top: '20%'
}, 500);
});
$('#return').on('click', function () {
$('#mskInner').animate({
top: '-100%'
}, 500);
$('#msk').delay(300).fadeOut(200);
});
});
解説
マウスカーソルがdocumentオブジェクト上部に到達すると、画面が真っ暗になりコンテンツが降りてくる仕組み。 ユーザー離脱防止に何かしらで役立つかもしれない。