[jQuery ] サブウインドウを画面の外からスライドインさせたい

CTAへの誘導やキャンペーン情報の告知として、スクロール操作に合わせて画面の下からサブウインドウをスライドさせる見せ方があります
下にスクロールする動きに対して逆方向の動きとなるので目立ちやすく、ただページ内にバナーを配置するよりも気づかせやすいです
その分、あまりしつこい見た目や動きにならないよう配慮が必要です。最低限、能動的にウインドウを閉じる手段は用意しておきましょう
本記事では、スクロール操作に応じてサブウインドウをスライドインさせる実装例をご紹介します

動作イメージ

画面をスクロールすると、右下からサブウインドウがニョキッとスライド
サブウインドウの×アイコンをクリックするとサブウインドウを隠す

サンプルコード

html

<div class="slide_window" id="slide_window">
    <button class="slide_window_close"></button>
    <div class="slide_window_content">
        <p>サンプルテキストサンプルテキスト</p>
        <p>サンプルテキストサンプルテキスト</p>
        <p>サンプルテキストサンプルテキスト</p>
    </div>
</div>

CSS

.slide_window {
    position: fixed;
    bottom: -100%;
    right: 60px;
    padding: 30px;
    border: 2px solid #3388dd;
    background-color: #fff;
    opacity: 0;
    transition: 1s;
}
.slide_window.js_active {
    bottom: 10px;
    z-index: 9999;
    opacity: 1;
}
.slide_window_close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    border: none;
    background: none;
    outline: none;
}
.slide_window_close::before,
.slide_window_close::after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 3px;
    height: 3px;
    background-color: #3388dd;
    content: "";
}
.slide_window_close::before {
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.slide_window_close::after {
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}
.slide_window_close:hover {
    cursor: pointer;
}

サブウインドウ（＝「slide_window」クラス）は「position: fixed;」で画面に対して固定の座標に配置するようにし、「bottom: -100%;」でウインドウの高さ分画面の外に隠れるよう指定します
スクロールが行われると、サブウインドウに「js_active」クラスが設定されます。「js_active」クラスが有効になったときに「bottom: 10px;」とすることで、画面外にいたウインドウが表示されます
この座標の移動がアニメーションで行われるよう、サブウインドウに「transition: 1s;」を指定しています

jQuery

jQuery(function($) {
    const slideWindow = $('#slide_window');
    if(slideWindow.length) {
        let isSlidable = true;
        $(window).scroll(function() {
            if(isSlidable) {
                if($(this).scrollTop() > 300) {
                    slideWindow.addClass('js_active');
                } else {
                    slideWindow.removeClass('js_active');
                }
            }
        });
        slideWindow.find('.slide_window_close').click(function() {
            isSlidable = false;
            slideWindow.removeClass('js_active');
            return false;
        });
    }
});

「$(window).scroll(function() { ～ }」で画面のスクロールを検知し、300px以上スクロールされているならサブウインドウに「js_active」クラスを設定します

横からスライドさせたい場合

スライドする方向を変えたい場合は、サブウインドウの初期位置と、「js_active」クラスが設定されたあとの位置を修正します

CSS

.slide_window {
    position: fixed;
    bottom: 60px;
    right: -100%;
    padding: 30px;
    border: 2px solid #3388dd;
    background-color: #fff;
    opacity: 0;
    transition: 1s;
}
.slide_window.js_active {
    right: 10px;
    z-index: 9999;
    opacity: 1;
}

セッションが終わるまでは再表示させたくない場合

複数のページにサブウインドウを仕込んだ場合、一度×アイコンでサブウインドウが閉じられた以降は、サブウインドウを表示しない方が無難です
セッションストレージの仕組みを使うことで、次回訪問時までサブウインドウの再表示を抑止することができます

jQuery

jQuery(function($) {
    const slideWindow = $('#slide_window');
    if(slideWindow.length) {
        $(window).scroll(function() {
            if(!sessionStorage.getItem('slide_window')) {
                if($(this).scrollTop() > 300) {
                    slideWindow.addClass('js_active');
                }
            }
        });
        slideWindow.find('.slide_window_close').click(function() {
            sessionStorage.setItem('slide_window', 'invalid');
            slideWindow.removeClass('js_active');
            return false;
        });
    }
});

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

[jQuery] サブウインドウを画面の外からスライドインさせたい

動作イメージ

サンプルコード

html

CSS

jQuery

横からスライドさせたい場合

CSS

セッションが終わるまでは再表示させたくない場合

jQuery

ご質問など受け付けています