【JavaScript】スクロールで表示されるポップアップ広告を実装する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでスクロールで表示されるポップアップ広告の実装方法をご紹介しています。

スクロールで表示されるポップアップ広告を実装したいんだけど、どうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

本記事では下記のデモの作り方をご紹介しています。ページをスクロールすると、ページの真中辺りでポップアップ広告が表示されます。

See the Pen Scroll PopUp Banner｜JavaScript by ryohei (@intotheprogram) on CodePen.

満たしている要件は下記の通りです。

ページの真中辺りでポップアップ広告を表示する
ポップアップ広告はセッション中に一度だけ表示する
ポップアップ広告はコンテンツをオーバーレイする形で表示する

セッション中に一度だけの表示となりますので、ページ遷移やリロードで再度表示されないようになっています。セッションですので、別タブやウィンドウで開いたり、履歴を削除すると再度表示されます。

では、作り方をご紹介していきます。

ポップアップ広告を作成する

まずはHTMLとCSSでポップアップ広告を作成します。

下記ではデモで使用しているものをそのまま記載しています。バナーにはダミー画像を使用していますので、実際に使用する際はバナー画像に置き換え、サイズを変更してご使用ください。

HTML

<div class="popup">
    <div class="popup-banner">
        <span class="popup-close">×</span>
        <a href="">
            <!-- バナー -->
            <img src="https://picsum.photos/300/300?grayscale" width="300" height="300" alt="">
        </a>
    </div>
</div>

<main>
    <!-- メインコンテンツ -->
</main>

SCSS（CSS）

@keyframes fadeIn {
    from { opacity: 0; }    
    to { opacity: 1; }
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .75);
    
    &-banner {
        position: relative;
    }
    
    &-close {
        position: absolute;
        top: -15px;
        right: -15px;
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 1.5rem;
        border-radius: 50%;
        text-align: center;
        color: white;
        background-color: black;
        cursor: pointer;
    }

    //popup表示時に付加されるclass
    &.open {
        display: flex;
        animation: fadeIn .7s;
    }
}

スクロールでポップアップ広告を表示する

デモで使用しているスクリプトをご紹介します。処理内容はコメントに記載の通りです。処理自体は冒頭で要件に上げた内容となっています。

//ポップアップ広告を取得
const popup = document.querySelector('.popup')
//ポップアップ広告の閉じるボタンを取得
const popupClose = document.querySelector('.popup-close')
//body要素を取得
const body = document.body
//表示位置を指定（下記はbody要素の真中辺り）
const position = body.clientHeight / 2

//スクロールされた場合の処理
window.addEventListener('scroll', ()=>{
    //スクロール位置を取得
    let scrollY = window.scrollY
    //ポップアップ広告の表示フラグを取得
    let popupFlag = sessionStorage.getItem('open')
    
    //スクロール量が表示位置以上であれば
    if(!popupFlag && position < scrollY){
        //ポップアップ広告表示
        popup.classList.add('open')
        //ポップアップ広告の表示フラグを表示済みに設定
        sessionStorage.setItem('open', true)
    }
    
    //popupがopenのclassを持っていれば
    if(popup.classList.contains('open')){
        //bodyのスクロールバーを非表示
        body.style.overflowY = 'hidden'
    } else {
        //bodyのスクロールバーを表示
        body.style.overflowY = 'auto'
    }
});

//ポップアップ広告の閉じるボタンがクリックされた場合の処理
popupClose.addEventListener('click', ()=>{
    //openのclassを削除
    popup.classList.remove('open')
    //bodyのスクロールバーを表示
    body.style.overflowY = 'auto'
})

上記ではsessionStorageを使用していますが、localStorageを使用するとセッションが切れた後も表示済みのフラグを保存することができます。使用方法については下記でご紹介していますので、ご参考にしていただければ幸いです。