JavaScript×CSSでふわっと追従広告を出す方法~画面下部に固定~
中山テックはChatGPTで補完しきれない
「視覚」(画像)を取り入れ
「参考になった!」と思っていただける
ブログ執筆を目指してます

中山テック 代表の中山です。

さて、最近ゲーム系ブログを色々といじっているのですが、画面下部にふわっと広告を出してます。

GoogleAdsenseのアンカー広告と同じような動きをさせている

そんな今回は自前のアンカー広告を実装する方法をお話したいと思います。

※追従バナーを消す方法はコチラ





サンプルなので文字は無視してください

※スマホ版になりますが、パソコン版でもやることが同じなので割愛します

まず、TOPの方にいても何も出ていないことが確認できます。

後述しますが、JavaScriptで「200pxスクロールしたら表示」の制御を入れてます。

ご覧の通り、浮き上がりながら画像の透明度が下がり、鮮明になっていきます。

いい感じに出てきました。

スクロールしても固定されて追従しております。

そしてTOPに戻る時に追従バーをしまいます。

透明度が上がりながらバナーがふわっと消えていくのを感じます。

ではどのように制御したのか、次の項へお進みください。



  • システム開発関連記事

HTML

<div id="jstest" class="sp"></div>

これだけです。

class=spは「スマホ版の時だけ表示」という独自CSSクラスとなります。

今回は関係ないので飛ばしてください。

CSS

ふわっと浮き出す方法

  #jstest {
    color:white;
    left: 0;
    width: 100%;
    height: 72px;
    position: fixed;
    display: block;
    z-index: 1000;
    background-color:black;
    text-align:center;
  }
  #jstest.up{
    animation: upMove 1.5s forwards; ⇒①
  }
  @keyframes upMove {
    from { ⇒②
      opacity: 0;
      transform: translateY(100px);
    }
    to { ⇒③
      opacity: 1;
      bottom:0;
    }
  }

「jstest」はデザインエリアなので気にせずで良いのですが、唯一気にするのは「z-index」の項です。

これは表示順を表し、数字が大きければ大きい程手前に来る優先順位が上がります。

「ブログ本文より前に出したい」狙いがあります。

では本題、ポイントは3つあります。コードの赤字箇所です。

①はアニメーション指定の項です。以前のブログでも使い方をお話しましたので参照下さい。

②FROMは透明度100%(何も見えない状態)、translateYで100px上にアップします。

③TOで透明度0%(くっきり見える状態)、バナーを0pxに固定します。

※bottomで0指定の場合、divの要素の下部を0(最下)に配置します

ふわっとそっ閉じする方法

  #jstest.down {
    animation: downMove 2.5s forwards;
  }
  @keyframes downMove { ⇒①
    from {
      opacity: 1;
      bottom:0;
    }
    to { ⇒②
      opacity: 0;
      transform: translateY(100px);
    }
  }

前項の続きです。

①のFROMではくっきり最下固定の状態からスタート

②のTOでは透明化しつつ、バナーを隠します

このようにFROMとTOで秒数指定してあげると、ふわっとした動きを実現できます。

Javascript

画面表示エリア

const imgurl = '<img src="https://nakayama-tech.com/wp-content/uploads/2023/10/jsgazou.png">';
document.getElementById("jstest").insertAdjacentHTML('afterbegin', imgurl );

ここはそんなに難しくありません。

まず、画像タグを定数化します。

そしてHTMLの項で設定したDIVに動的にタグを入れてあげるだけです。

ゲーム攻略ブログで動的にした処理を流用しただけなので、HTMLタグに直接書き込んでも問題ありません。

表示・非表示制御

function jstestFuwatto() {
  var scroll = $(window).scrollTop(); ⇒①
  if (scroll >= 200){ ⇒②
    $('#jstest').removeClass('down');
    $('#jstest').addClass('up');
  }else{ ⇒③
    if($('#jstest').hasClass('up')){
      $('#jstest').removeClass('up');
      $('#jstest').addClass('down');
    }
  }
}
window.addEventListener('scroll', jstestFuwatto); ⇒④

ここでCSSのdown(非表示)、up(表示)を制御しています。

①は「画面TOP」の座標を取得します。

②その座標が「200(px)」を超えた時の制御を行います。

down(非表示)の状態を取り除き、up(表示)の状態にします。

③はTOPから200(px)以内での動きですがup(表示)だった場合にremove除去、addでdown(非表示)にします。

④はこちらのブログでも説明したので割愛します。

YouTube


削除機能(後日ブログで執筆予定)付きの補足動画を制作しました。

ショートで概要的なものですが、多少はイメージ付くかと思います。

参考になった、面白いと思って頂けたらチャンネル登録・高評価お願いいたします。



まとめ

ふわっと出す系は別ブログでもお話したので、そこまで目新しいものはなかったかもしれません。

その時のブログは「到達したら」という条件であり、今回は「画面最下固定」であります。

もしお困りで、当ブログが参考になったのであれば幸いです。

最後までご覧頂き、ありがとうございました。

※中山テックに掲載しているゲーム画像の著作権、商標権、その他知的財産権は、当該コンテンツの提供元に帰属します


おすすめの記事