コピペで使えるコード: JavaScript, CSS, HTMLを用いた動的バナー作成

  • バナー要素とクローズボタン要素の取得
    var banner = document.querySelector('.banner');var closeButton = document.querySelector('.close-button');を用いて、バナーとクローズボタンの要素を取得します。これにより、JavaScriptからこれらの要素を操作することが可能になります。

  • クローズボタンのクリックイベントのリスナーの追加
    closeButton.addEventListener('click', function() {...}で、クローズボタンがクリックされたときに実行される関数(リスナー)を設定します。この関数ではバナーの表示を非表示に切り替えます。

  • バナーのアニメーション関数
    function animateBanner() {...}ではバナーが斜めに動くアニメーションを制御します。バナーの位置はページの高さと幅を元にランダムに決定され、2秒ごとに更新されます。

  • バナーのフェードイン・フェードアウト関数
    function fadeBanner() {...}ではバナーのフェードインとフェードアウトを制御します。クラス名’active’の有無でバナーの透明度が切り替わり、3秒ごとにこの状態が切り替わります。

CSS

.banner-container {
 position: relative; 
  width: 100%;
  height: 50%; /* Adjust the height as needed   z-index: 9999; */
  overflow: hidden;
}

.banner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 1; 
}

.banner.active {
  position: absolute;
  opacity: 1;
  z-index: 1; 
}

.banner img {
  width: 100%;
  height: auto;
}

.close-button {
  position: absolute;
  top: -20px;
  right: 0;
  font-size: 20px;
  border-radius: 50%;
  border:2px solid #eee;
  color: #FFF;
  background-color: #333;
  padding: 5px 14px;
  cursor: pointer;
}
  • バナーのコンテナのスタイル設定
    バナーのコンテナはページ全体に対して絶対位置を指定し、横幅100%、高さ50%に設定されています。また、z-indexで他の要素よりも前面に表示されるようにしています。

  • バナーのスタイル設定
    バナーはコンテナの中央に配置され、初期状態では透明に設定されています。’active’クラスが追加されると不透明になります。

  • クローズボタンのスタイル設定
    クローズボタンはバナーの右上に配置され、背景色は暗灰色、文字色は白色に設定されています。また、マウスカーソルがボタンの上にあるときはポインターに変わります。

HTML

<div class="banner-container">
    <div class="banner">
      <span class="close-button">×</span>
      <img src="https;//example.com/test-banner.png" alt="Banner Image">
    </div>
  </div>

3つの実用例

  1. プロモーションのアナウンス
    新製品やセールの情報など、サイトの訪問者に伝えたい情報をバナーに記載し、サイトのどこでも表示できます。

  2. ユーザーガイドの提示
    サイトの使い方や重要なガイドラインをバナーに記載し、サイト訪問者に情報を提供できます。

  3. サイトの注意点や警告の表示
    サイトの使用にあたって注意が必要な点や警告をバナーに記載し、ユーザーに直ちに知らせることができます。

バナーの動きを調整して使用してください。

記事を書いてる人

ガラケー時代からWEB開発やってる自宅SE です。

「○○を知りたい!!」「○○が分からない!!」などありましたら、Twitterでもブログでもコメントいただければ、ご期待に添えるように頑張ります!

ネット事件簿チャンネルを運営しているので、YouTubeもぜひ覗いてみてください!!

雨おやじのSNSを覗く!!
JavaScript
雨おやじのSNSを覗く!!
ITkagyo

コメント