JavaScript×CSSでふわっと追従バナーを出す方法～画面下部に固定～

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

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

CSSでふわっと出してJavaScriptでスクロール制御といった形を取り入れています。

GoogleAdsenseを取り入れているWEBページではよく見られる手法です。

似たような機能を実装したのですが、どのように開発したのかをお話したいと思います。

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

• JavaScript&CSS関連リンク

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

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

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

ふわっと浮き出す方法

  #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.down {
    animation: downMove 2.5s forwards;
  }
  @keyframes downMove {　⇒①
    from {
      opacity: 1;
      bottom:0;
    }
    to {　⇒②
      opacity: 0;
      transform: translateY(100px);
    }
  }

画面表示エリア

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

表示・非表示制御

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);　⇒④