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

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

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

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

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

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

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



サンプルなので文字は無視してください

※スマホ版になりますが、パソコン版でもやることが同じなので割愛します

まず、TOPの方にいても何も出ていないことが確認できます。

後述しますが、JavaScriptで「200pxスクロールしたら表示」の制御を入れてます。

ご覧の通り、浮き上がりながら画像の透明度が下がり、鮮明になっていきます。

いい感じに出てきました。

スクロールしても固定されて追従しております。

そしてTOPに戻る時に追従バーをしまいます。

透明度が上がりながらバナーがふわっと消えていくのを感じます。

ではどのように制御したのか、次の項へお進みください。



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

HTML

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

これだけです。

ちなみにクラスの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


削除機能(後日ブログで執筆予定)付きの補足動画を制作しました。

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

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



まとめ

ふわっと出す系は別ブログでもお話したので、そこまで目新しいものはなかったかもしれません。

その時のブログは「到達したら」という条件であり、今回は「画面最下固定」であります。

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

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



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


中山テックのお仕事

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

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

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


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



おすすめの記事