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

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

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

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

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

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

• JavaScript&CSS関連記事(記事はまだまだ続きます)

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