![thumb](https://nakayama-tech.com/wp-content/uploads/2023/11/Produce.gif)
中山テック 代表の中山です。
さて、最近ゲーム系ブログを色々といじっているのですが、画面下部にふわっと広告を出してます。
※GoogleAdsenseのアンカー広告と同じような動きをさせている
そんな今回は自前のアンカー広告を実装する方法をお話したいと思います。
目次
サンプル(スマホ)
![](https://nakayama-tech.com/wp-content/uploads/2023/10/blog-20231029-01-509x1024.jpg)
※スマホ版になりますが、パソコン版でもやることが同じなので割愛します
まず、TOPの方にいても何も出ていないことが確認できます。
![](https://nakayama-tech.com/wp-content/uploads/2023/10/blog-20231029-02-509x1024.jpg)
後述しますが、JavaScriptで「200pxスクロールしたら表示」の制御を入れてます。
ご覧の通り、浮き上がりながら画像の透明度が下がり、鮮明になっていきます。
![](https://nakayama-tech.com/wp-content/uploads/2023/10/blog-20231029-03-512x1024.jpg)
いい感じに出てきました。
スクロールしても固定されて追従しております。
![](https://nakayama-tech.com/wp-content/uploads/2023/10/blog-20231029-04-537x1024.jpg)
そして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
削除機能(後日ブログで執筆予定)付きの補足動画を制作しました。
ショートで概要的なものですが、多少はイメージ付くかと思います。
参考になった、面白いと思って頂けたらチャンネル登録・高評価お願いいたします。
まとめ
ふわっと出す系は別ブログでもお話したので、そこまで目新しいものはなかったかもしれません。
その時のブログは「到達したら」という条件であり、今回は「画面最下固定」であります。
もしお困りで、当ブログが参考になったのであれば幸いです。
最後までご覧頂き、ありがとうございました。