コピペで使えるコード: JavaScriptを用いたダイナミックな動きのバナー作成

バナーの動きを確認後に、×マークをクリックして非表示にしてください。

javascript
CSS
HTML
3つの実用例

javascript

window.addEventListener('DOMContentLoaded', function() {
  var banner = document.querySelector('.banner');
  var closeButton = document.querySelector('.close-button');

  // バナーの表示・非表示の切り替え
  closeButton.addEventListener('click', function() {
    banner.style.display = 'none';
  });

  // バナーの上下斜めに動かす
  function animateBanner() {
    var containerHeight = document.querySelector('.banner-container').offsetHeight;
    var containerWidth = document.querySelector('.banner-container').offsetWidth;

    var topPosition = Math.random() * (containerHeight - banner.offsetHeight);
    var leftPosition = Math.random() * (containerWidth - banner.offsetWidth);

    banner.style.top = topPosition + 'px';
    banner.style.left = leftPosition + 'px';

    setTimeout(animateBanner, 1000); // 1秒ごとに動作
  }

  // バナーのフェードインとフェードアウト
  function fadeBanner() {
    banner.classList.toggle('active');
    setTimeout(fadeBanner, 2000); // 2秒ごとに動作
  }

  animateBanner();
  fadeBanner();
});

バナー要素とクローズボタン要素の取得
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>