
中山テック 代表の中山です。
先日のブログでは、ページ開いて200pxスクロールすると画面最下に固定バナーを追従させました。
今回は「固定バナーを消せるようにする」「消すためのアイコンを実装」「消す際に画像を変える」機能をご紹介いたします。
早速、やっていきましょう!
※先日のブログから肉付けしているので試す時は応用効かせてやってみてください

ソースコードを紹介する前に、どのような動作をするかご紹介します。
上記はタップ前の状態、つまり透明度0%で広告を表示し、サイトへの訴求を行っております。
では早速アイコンをタップしてみましょう。


すると旧アイコンが消え、新アイコンが表示されました。
消えてしまう前の驚きの表情を差し替えて、それっぽく見せたい狙いがあります。
※勉強のために制作したとはいえ、広告が目立たなそうな予感もします

一度バナーを閉じるともう表示されないプログラムになっています。
またアイコンをクリックしたら復活する機能はまた時間ある時に実装しようと思います。
HTML
<div id="koukoku-fixed-sp2" class="sp"></div>
いつも通りHTMLは少な目です。
というのも、CSSとJavaScriptで制御してしまうからです。
anime.js | CSSとデベロッパツール | 文字ふわっと浮き出る | 画面外から | ふわっと追従 | 追従ふわっと消す |
ランダム表示 | JavaScriptデバッグ | SmtpJS | メール送信問合せフォーム | スライド | 文字列を改行 |
プルダウン複数頁に | ボタン×ダイアログ |
anime.js | CSSとデベロッパツール | 文字ふわっと浮き出る |
画面外から | ふわっと追従 | 追従ふわっと消す |
ランダム表示 | JavaScriptデバッグ | SmtpJS |
メール送信問合せフォーム | スライド | 文字列を改行 |
プルダウン複数頁に | ボタン×ダイアログ |
CSS
#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);
}
}
スマホ版での処理を例に取ります。
「upGame2」は前回のブログとやっていることが同じなので割愛するとして、downGameというボタンタップで沈む機能を実装しました。
やっていることはupGame2の逆で、透明度0(表示)から6秒かけて透明度100(非表示)で100px分沈んでいくという動きになります。
JavaScript
画像配置
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');
}
処理はrand以降です。
ランダム生成処理はコチラのブログで説明済みなので割愛します。
①で広告を隠す画像配置を行うのですが「onclick」でタップした時に画像変更と消す処理を実装しています。
②の処理で、「insertAdjacentHTML」を使用して「広告を隠す」アイコンを実装し、その下でバナー配置を行っております。
③は①で定義した、画像タップ時の動きその1です。今の画像を除去して新しい画像に差し替えます。
新しい画像は①の下「tojirunkai」で定義した定数です。
④で除去するのですが、「donwGame」クラスを設定しています。
CSSの項で説明した透明度を上げつつ、消す処理を呼んでいる形となります。
YouTube
削除機能付きの補足動画を制作しました。
ショートで概要的なものですが、多少はイメージ付くかと思います。
参考になった、面白いと思って頂けたらチャンネル登録・高評価お願いいたします。
まとめ
前回のブログとの合わせ技でページ下部にバナー表示・非表示が可能となりました。
広告などで使用可能(むしろそれ以外あるのかは不明)となっており、非常に便利な機能でもあります。
もしお困りで、当ブログが参考になったのであれば幸いです。
最後までご覧頂き、ありがとうございました。