
こんにちは。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); }); });デモはこちら