jquery.wanker.jsを使ってブラウザ拡大・縮小時にページ全体にメッセージを表示する方法

jquery.wanker.jsを使ってブラウザを拡大・縮小するとページ全体にメッセージを表示する方法をご紹介します。

jquery.wanker.jsを使ってブラウザ拡大・縮小時にページ全体にメッセージを表示するCSSの記述

※ページ全体に表示するメッセージエリア（.wanker）のCSS記述です。必要に応じて変更して下さい。

<style>
body {
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 1.6em;
  padding-top: 20px;
}
.wanker {
  background: #000;
  color: #FFF;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2014;
}
.wanker-content {
  font-size: 33px;
  font-weight: bold;
}
.wanker-content p{
  padding-top: 200px;
}
</style>

jquery.wanker.jsを使ってブラウザ拡大・縮小時にページ全体にメッセージを表示するHTMLの記述

※ページ全体に表示するメッセージエリア（class=”wanker”、class=”wanker-content”）を用意しします。必要に応じて変更して下さい。

<h1>jquery.wanker.jsを使ってブラウザ拡大縮小時にブラウザ全体にメッセージを表示します。<br>ブラウザを拡大・縮小してみてください。</h1>

<div class="wanker" data-wanker>
  <div class="wanker-content">
    <p>ブラウザを拡大・縮小しないで下さい。</p>
  </div>
</div>

jquery.wanker.jsを使ってブラウザ拡大・縮小時にページ全体にメッセージを表示するJavaScriptの記述

※jquery-1.11.0.min.js、jquery.wanker.jsファイルを読み込みます。$(‘[data-wanker]’).wanker({オプション})を記述します。オプションではメッセージの表示スピード等の設定が可能です。

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.wanker.js"></script>
<script>
$(function() {
  $('[data-wanker]').wanker({delay: 0, duration: 600});
});
</script>

jquery.wanker.jsを使ってブラウザ拡大・縮小時にブラウザ全体にメッセージを表示するデモページ

jquery.wanker.jsを使ってブラウザ拡大・縮小時にブラウザ全体にメッセージを表示するデモページ

ソース元：jquery.wanker.js by Mig Reyes

以下がソース元です。
jquery.wanker.js by Mig Reyes

　
レスポンシブサイトだからって必要以上にページを拡大・縮小する人向けのメッセージ表示に使えるかもです。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。