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

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

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

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

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

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



ソースコードを紹介する前に、どのような動作をするかご紹介します。

上記はタップ前の状態、つまり透明度0%で広告を表示し、サイトへの訴求を行っております。

では早速アイコンをタップしてみましょう。

画像が変わった瞬間
透明化しながらふわっと閉じていく

すると旧アイコンが消え、新アイコンが表示されました。

消えてしまう前の驚きの表情を差し替えて、それっぽく見せたい狙いがあります。

※勉強のために制作したとはいえ、広告が目立たなそうな予感もします

そして誰もいなくなった・・・

一度バナーを閉じるともう表示されないプログラムになっています。

またアイコンをクリックしたら復活する機能はまた時間ある時に実装しようと思います。

HTML

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

いつも通りHTMLは少な目です。

というのも、CSSとJavaScriptで制御してしまうからです。

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


削除機能付きの補足動画を制作しました。

ショートで概要的なものですが、多少はイメージ付くかと思います。

参考になった、面白いと思って頂けたらチャンネル登録・高評価お願いいたします。



まとめ

前回のブログとの合わせ技でページ下部にバナー表示・非表示が可能となりました。

広告などで使用可能(むしろそれ以外あるのかは不明)となっており、非常に便利な機能でもあります。

もしお困りで、当ブログが参考になったのであれば幸いです。

最後までご覧頂き、ありがとうございました。



参考になった・面白いと思って頂けたらクリックお願いします!
ブログランキング・にほんブログ村へ
にほんブログ村


中山テックのお仕事

ご依頼事項内容
システム開発  SESの業務委託
詳しくはこちらをご覧ください
WEB制作新規ご依頼時は
・ドメイン取得
・WEBサーバ契約
レクチャからスタート。
PHP(Wordpress)でサーバ制御。
HTML/CSS/JavaScriptでフロント制御。

ご料金はこちらをご覧ください
ブログ執筆取材&執筆のご依頼承っております。
主なジャンルは
・ゲーム
・地域の名所、観光
・グルメ
・その他ご依頼事項(要相談)

詳しくはこちらをご覧ください


※中山テックに掲載しているゲーム画像の著作権、商標権、その他知的財産権は、当該コンテンツの提供元に帰属します



おすすめの記事