こんにちは、MIO webデザインです。
ネットサーフィンをしていると、稀に「タブを閉じようとカーソル移動すると、モーダルウィンドウが表示されるギミック」を見かけることがあります。
これってユーザーの離脱を防止する上で使えるのでは?
ということで、今回はjQueryを使ってユーザー離脱防止に繋がるかもしれないギミックを作ってみました。
仕組みの解説とデモ
簡単に説明すると、ユーザーがページを閉じようとマウスカーソルをブラウザ上部に移動させると、コンテンツが表示される仕組みです。
思わずユーザーが「なんだろう?」と目が行く仕様になっていますね。が、悪用は厳禁なのであしからず(やりすぎたらうざがられます)。
HTML
<div id="msk">
<div id="mskInner">
<img src="images/cat1.jpg">
<p id="return">× 閉じる</p>
</div>
</div>
<div id="mskSwitch"></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);
});
});