勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

スクロールしてもついてくる追尾型の広告を作る方法

   2024/01/13  jQuery

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追尾型の広告を作りたかった。というのも大体の場合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を使わないとエラーが出るので注意。

https://github.com/jquery/jquery-migrate

 - jQuery

  関連記事

imgタグで作成したグラフをjQueryでリアルタイムに動かす

このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...

jQueryにて複数のajax処理のレスポンスをまとめて表示する方法

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

jQuery UIを用いた日付及び時間のピッカーの利用方法

jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...

jQueryで関数処理中にブラウザのブロック(intro.js)

Ajaxで処理を行っている間、他の処理を行わせたくなかった。 「now load ...

amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法

amazon等のECサイトによくにあるアイテムの満足度を星マークかつ5段階で送信 ...