【コピペで簡単】スクロールでふわっと出現！ランダムに切り替わる固定追従バナーの作り方（HTML/CSS/JS）

<!-- UX配慮型 固定バナー（ランダム表示対応版） -->
<div id="smart-fixed-banner" style="display: none; opacity: 0;">
    <button id="banner-close-btn" aria-label="閉じる">×</button>
    <a id="smart-banner-link" href="">
        <img id="smart-banner-img" src="" alt="">
    </a>
</div>

<style>
/* バナー本体の設定 */
#smart-fixed-banner {
    position: fixed !important;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    width: 90%;
    max-width: 400px;
    line-height: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: auto;
}

/* 表示状態のクラス */
#smart-fixed-banner.is-visible {
    opacity: 1 !important;
}

#smart-fixed-banner img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* 閉じるボタン */
#banner-close-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    background: #444;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000001;
}

/* スマホ用の位置調整（フッターメニューを考慮して少し高めにする場合など） */
@media (max-width: 959px) {
    #smart-fixed-banner {
        bottom: 75px;
        width: 88%;
    }
}
</style>

<script>
(function() {
    // 表示したいバナーとリンクのリスト
    const bannerList = [
        {
            link: "https://example.com/link-1", // 遷移先URL①
            img: "https://example.com/image-1.jpg", // 画像URL①
            alt: "キャンペーン案内1" // 代替テキスト
        },
        {
            link: "https://example.com/link-2", // 遷移先URL②
            img: "https://example.com/image-2.jpg", // 画像URL②
            alt: "キャンペーン案内2"
        },
        {
            link: "https://example.com/link-3", // 遷移先URL③
            img: "https://example.com/image-3.jpg", // 画像URL③
            alt: "キャンペーン案内3"
        }
    ];

    window.addEventListener('DOMContentLoaded', function() {
        const banner = document.getElementById('smart-fixed-banner');
        const bannerLink = document.getElementById('smart-banner-link');
        const bannerImg = document.getElementById('smart-banner-img');
        const closeBtn = document.getElementById('banner-close-btn');
        const showThreshold = 400; // 表示を開始するスクロール量(px)
        let isManuallyClosed = false; // 「そのページで閉じたか」を管理するフラグ

        // リストからランダムに1つ選択してHTMLに設定
        if (bannerList.length > 0) {
            const randomIndex = Math.floor(Math.random() * bannerList.length);
            const selectedBanner = bannerList[randomIndex];
            
            bannerLink.href = selectedBanner.link;
            bannerImg.src = selectedBanner.img;
            bannerImg.alt = selectedBanner.alt || "キャンペーン案内";
        } else {
            // バナーリストが空の場合は処理を終了
            return;
        }

        // スクロール監視
        window.addEventListener('scroll', function() {
            if (isManuallyClosed) return;

            if (window.scrollY > showThreshold) {
                if (banner.style.display === 'none') {
                    banner.style.display = 'block';
                    setTimeout(() => banner.classList.add('is-visible'), 10);
                }
            } else {
                // 上に戻った時はフェードアウトさせて非表示にする
                banner.classList.remove('is-visible');
                setTimeout(() => { if(!banner.classList.contains('is-visible')) banner.style.display = 'none'; }, 400);
            }
        });

        // 閉じるボタンの動作
        closeBtn.addEventListener('click', function(e) {
            e.preventDefault();
            isManuallyClosed = true; // このページでの表示フラグをオフにする
            
            banner.classList.remove('is-visible');
            setTimeout(() => {
                banner.style.display = 'none';
            }, 400);
        });
    });
})();
</script>

const bannerList = [
    {
        link: "リンク先URL",
        img: "画像URL",
        alt: "画像説明"
    }, // ← カンマで区切る
    {
        link: "もう一つのリンク先URL",
        img: "もう一つの画像URL",
        alt: "もう一つの画像説明"
    }
];

@media (max-width: 959px) {
    #smart-fixed-banner {
        bottom: 75px; /* ここの数値を大きくすると上方向に移動します */
        width: 88%;
    }
}