【初心者でもわかる】スクロールの途中でバナー広告画像を表示する方法

どうも7noteです。スクロールしたら途中でピョコッと出てくる画像の作り方を解説

ここ数年でwebのバナー広告がとても増えたように思います。その中でもスクロールしていたら急に出てくるバナー系。

個人的には視線を奪われるのでストレスになり嫌いなのですが、ちゃんと欲しい情報が出てるのならいい仕組みだなと思います。

今回は簡易的に「一定距離スクロールしたら画面の下から出てくるバナー画像」を作っていきます。

スクロールしたら出てくるバナー画像の作り方

index.html

〜〜〜〜省略〜〜〜〜

<div class="banner">
  <img src="banner.png" alt="">
</div>

〜〜〜〜省略〜〜〜〜

style.css

.banner {
  width: 100%;
  background: #aaa;
  display: none;    /* 最初は非表示にする */
  position: fixed;  /* 表示位置を固定 */
  bottom: 0;
  left: 0;
  padding: 5px;
  box-sizing: border-box;
}
.banner img {
  width: 100%;
}

script.js

$(window).scroll(function () {
  var pos = 800; // ①上からの距離(px)で指定する場合
  var pos = document.body.clientHeight / 3; // ②上からの割合(%)で指定する場合
  if ($(this).scrollTop() > pos) {
    $('.banner').fadeIn();
  } else {
    $('.banner').fadeOut();
  }
});

※①か②は好きな方を指定してください。

解説

バナーを出すタイミングを決めるために、スクロール量を計測します。
スクロール量の設定方法としては大きく2つの選択があり、

・上からXXpx進んだら、もしくは下からXXpxのところまできたら
・ページ全体の何割スクロールしたか

上のような2つの方法があります。割合で決めるのか、上、もしくは下からの距離で指定をすることができます。

またorを使って両方の仕様を適応させて、「50%のところまでスクロールされたら、もしくはページが長いときには上から1500pxスクロールされたら、、、」みたいな書き方も可能です。

バナー画像を出すタイミングのスクリプトが書けたら、次は画像を表示する処理を書きます。

今回はfadein、fadeoutを使って表示を切り替えていますが、クラスを付与したら出てくるように表示時用のCSSを書きわける方法もあります。

これで完成ですね。

まとめ

今回は自作で作る方法を解説しましたが、多くのサイトは専用のツールを導入しているのかな？と思います。

ツールを導入することで、実際にどれくらいの年代や性別の人がどの割合でクリックしたのかなどの計測ができるツールとして売られています。

最初にも書きましたが、個人的にはユーザーの動きに反する広告なのでそのうち廃れるのでは。。。なんて勝手に考えています。(※個人の感想です)

webの業界は流行り廃りが激しいので、また新しい手法がどんどん出てくるでしょう。
時代に合わせたwebが作れるようになりたいものですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ