全画面カウントダウン広告コピペ一発JavaScript!秒数を設定するだけ

5 秒後に広告が閉じます
カウントダウン広告

強力な広告表示方法を、コピペでできるコード付きで解説します。

動作確認はこちら

Javascript

function closeAdAfterTimeout(adId, timeout) {
            var countdownElement = document.querySelector('#' + adId + ' .countdown span');
            var remainingTime = timeout / 1000; // Convert to seconds

            var countdownInterval = setInterval(function() {
                remainingTime -= 1;
                countdownElement.textContent = remainingTime;

                if (remainingTime <= 0) {
                    clearInterval(countdownInterval);
                    closeAd(adId);
                }
            }, 1000);
        }

function closeAd(adId) {
            var ad = document.getElementById(adId);
            if (ad) {
                ad.style.display = 'none';
            }
        }

function showAd(adId) {
            var ad = document.getElementById(adId);
            if (ad) {
                ad.style.display = 'block';
                closeAdAfterTimeout(adId, 5000); // 5000 milliseconds = 5 seconds
            }
        }

// Add event listener to the button
document.getElementById('showAdButton').addEventListener('click', function() {
            showAd('prestitial-ad');
        });

HTMLに設置してあるIDshowAdButtonのボタンをクリックすると、showAd関数が呼び出され、広告が表示れる。

showAd関数内でcloseAdAfterTimeout関数が呼び出され、指定された時間(この例では5000ミリ秒=5秒)後に広告を閉じるように設定されている。ここの設定で秒数を変更する。

指定された時間が経過すると、closeAd関数が自動的に呼び出され、広告が閉じる。

このコードは、広告を表示した後、自動的に5秒後に広告を閉じる動作を実現する。

CSS

.ad {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.ad-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.countdown {
    position: absolute;
    top: 30%; /* この値を変更しました */
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px;
    border-radius: 5px;
}

HTML

<div id="prestitial-ad" class="ad">
    <div class="countdown">
        <span>5</span> 秒後に広告が閉じます
    </div>
    <div class="ad-content">
       <img src="画像バナー" alt="カウントダウン広告">
    </div>
</div>

使用方法

広告の設計

まず、広告のデザインと配置を計画する。広告が全画面を覆うように設計することが重要。

コードの設置

提供のHTML、CSS、Javascriptのコードをコピペする。

秒数の設定

Javascriptコード内のtimeout変数を編集し、広告が自動で閉じるまでの秒数を設定する。

テストで確認

自サイトに設置後、テストして動作を確認し、調整をする。

使用例

  • オンラインショップで、特別なセールやキャンペーンを訪問者に知らせるために使用。
  • 新しい機能や更新情報を訪問者に効果的に伝えるために使用。

注意事項

ユーザー体験(UX)

全画面広告は、訪問者にとって邪魔になる場合がある。適切な時間で自動的に閉じるように設定する。

レスポンシブデザイン

様々なデバイスで適切に表示されるように、広告のデザインを確認するようにする。

法的な規制

広告の表示に関する法的な規制やガイドラインを確認し、遵守するようにしましょう。

これらのポイントを注意深くフォローすることで、訪問者にとってより良い体験を提供しながら、効果的な全画面広告を実装できるでしょう。

これで、全画面カウントダウン広告が実装できるようになりました。

インパクトある広告を見せつつ、ユーザーの快適な閲覧体験を提供しましょう。

YouTubeのチャンネル登録はこちら!!
ポチッと応援よろしくね!!
開発・運営ランキング にほんブログ村 IT技術ブログ IT技術情報へ
記事を書いてる人
デプロイ太郎

ガラケー時代からWEB開発やってるバツイチ自宅SEです。不眠不休で働くので、ブログのブックマークとYouTubeのチャンネル登録とX(旧Twitter)のフォローお願いします。デスマ上等!!

「コンテンツモンスターになり、モンスターコンテンツを生み出す!!」

デプロイ太郎のSNSを見てみる!!
JavaScript
デプロイ太郎のSNSを見てみる!!

コメント

タイトルとURLをコピーしました