jquery.wanker.jsを使ってブラウザを拡大・縮小するとページ全体にメッセージを表示する方法をご紹介します。
Contents
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アナリティクスタグは流用しないで下さい。
ディスプレイ広告