JavaScript×CSSで追従バナーをふわっと消す方法～アイコンで制御～

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

先日のブログでは、ページ開いて200pxスクロールすると画面最下に固定バナーを追従させました。

今回は「固定バナーを消せるようにする」「消すためのアイコンを実装」「消す際に画像を変える」機能をご紹介いたします。

早速、やっていきましょう！

※先日のブログから肉付けしているので試す時は応用効かせてやってみてください

<div id="koukoku-fixed-sp2" class="sp"></div>

• JavaScript&CSS関連リンク

anime.js	CSSとデベロッパツール	文字ふわっと浮き出る	画面外から	ふわっと追従	追従ふわっと消す
ランダム表示	JavaScriptデバッグ	SmtpJS	メール送信問合せフォーム	スライド	文字列を改行
プルダウン複数頁に	ボタン×ダイアログ

anime.js	CSSとデベロッパツール	文字ふわっと浮き出る
画面外から	ふわっと追従	追従ふわっと消す
ランダム表示	JavaScriptデバッグ	SmtpJS
メール送信問合せフォーム	スライド	文字列を改行
プルダウン複数頁に	ボタン×ダイアログ

  #koukoku-fixed-sp2 {
    color:white;
    left: 0;
    width: 100%;
    height: 92px;
    position: fixed;
    display: block;
    z-index: 998;
    background-color:black;
    text-align:center;
  }
  #koukoku-fixed-sp2.upGame2{
    animation: upGameMove2 1s forwards;
  }
  @keyframes upGameMove2{
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      bottom:0;
    }
  }

  #koukoku-fixed-sp2.downGame2 {　⇒①
    animation: downGameMove2 6s forwards;
  }
  @keyframes downGameMove2{　⇒②
    from {
      opacity: 1;
      bottom:0;
    }
    to {
      opacity: 0;
      transform: translateY(100px);
    }
  }

画像配置

const tojiruyo = '<img style="position:fixed;left:0px;top:-60px;z-index:999;width:208px;height:75px;" src="https://nakayama-tech.com/wp-content/uploads/2023/10/saihai3.png" onclick="gameGazouSashikae(),koukokuClose()">';　⇒①

const tojirunkai = '<img style="position:fixed;left:0px;top:-60px;z-index:999;width:324px;height:95px;" src="https://nakayama-tech.com/wp-content/uploads/2023/10/tojirunkai.png">';

rand = Math.floor(Math.random() * gameAdsArrayFooter.length);
document.getElementById("koukoku-fixed-sp2").insertAdjacentHTML('afterbegin', tojiruyo);　⇒②
document.getElementById("koukoku-fixed-sp2").insertAdjacentHTML('beforeend', gameAdsArrayFooter[rand]);

//画像差し替えSP
function gameGazouSashikae() {　⇒③
    let bottomKoukokuList = document.getElementById('koukoku-fixed-sp2');
    bottomKoukokuList.querySelector('img').remove();
    bottomKoukokuList.insertAdjacentHTML('afterbegin', tojirunkai);
}

//広告削除(SP)
function koukokuClose() {　⇒④
    $('#koukoku-fixed-sp2').addClass('downGame2');
}