スクロールしてもついてくる追尾型の広告を作る方法
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を使わないとエラーが出るので注意。
関連記事
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)
テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...
-
-
jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法
jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
JavaScript / jQueryで〇番目、最初、最後の要素を指定する方法
jQueryでリストタグ(<li>)の〇番目、最初、最後の要素を指定 ...