スクロールしてもついてくる追尾型の広告を作る方法
2024/01/13
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追尾型の広告を作りたかった。というのも大体の場合JSタグをそのまま発行してくれるんだけど、今回はバナー用画像とURLのみ発行します、というパターンだった。
調べてみるとjQueryのMeerkatというプラグインが楽に実装できそう。以下にサンプルとソースのメモ。
Meerkat
http://meerkat.jarodtaylor.com/
サンプル
https://taitan916.info/sample/meerkat/
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery.meerkatのサンプル</title> <style> .pos-bot .ad_area { left: 0; margin: 0 auto; position: absolute; right: 0; width: 320px; } .m200{ margin-bottom:200px; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-migrate-1.0.0.js"></script><!-- ←jqueryのバージョンが1.9未満なら多分不要 --> <script type="text/javascript" src="jquery.meerkat.1.3.js"></script> <script type="text/javascript"> $(function(){ $('.meerkat').meerkat({ height: '100px', width: '100%', position: 'bottom', animationIn: 'slide', animationSpeed: 500, removeCookie: '.reset' }).addClass('pos-bot'); }); </script> </head> <body> <div> <p class="m200">text</p> <p class="m200">text</p> <p class="m200">text</p> <p class="m200">text</p> <p class="m200">text</p> </div> <div class="meerkat"> <div class="ad_area"> <a href="http://google.com" target="_blank" class="ad_link"> <img src="banner.png" class="ad_img"> </a> </div> </div> </body> </html>
その他
jQuery1.9以降を使う場合はjquery-migrateを使わないとエラーが出るので注意。
関連記事
-
-
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した要素のposition(leftやtop) / width ...
-
-
アンカーリンクでURLに「#hoge」のようなパラメータを残さずスクロールさせる方法
アンカータグをクリックしてもブラウザのURL欄に「#hoge」のようなハッシュを ...
-
-
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
-
-
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...
-
-
jQueryのloadメソッドでファイル(ページ)を呼び出す
サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...