動きを実現する仕組み
Javascriptでスクロールするとモーダルバナーが出現する
STEP1 HTMLコード
① head終了タグ直前に自作のCSSを読み込みます。＊wordpressでfunctionにて設定の場合は省略
<head>
<link rel="stylesheet" type="text/css" href="css/5-1-14.css">
</head>② body内にリンク元のHTMLとリンク先のHTMLを記載します。
<body>
<!-- モーダルバナー -->
<div id="modal-banner" class="modal-banner">
<div class="modal-overlay"></div>
<div class="modal-content">
<button class="modal-close" aria-label="閉じる">×</button>
<a href="#">
<img src="https://dl.dropbox.com/scl/fi/fb6i0y3fx2jl93n97rcly/banner_demo2.png?rlkey=4nf56oae37jt2sfjvd1h4l60f&st=4eed9p2c&dl=0" alt="バナー" />
</a>
</div>
</div>
<header class="header">
<div class="header_inner">
<div class="bland_logo">
<a href="#"
><img src="https://dl.dropbox.com/scl/fi/sbjztmkndfgjmj5p5iavi/logo.svg?rlkey=unaseh4yrvdmvsdn2vedulqo8&st=7ov5e86j&dl=0" alt="ブランドロゴ"
/></a>
</div>
<div class="header_right">
<nav class="pc-nav">
<ul>
<li><a href="#">商品一覧</a></li>
<li><a href="#">会社情報</a></li>
<li><a href="#">オンライン肌診断</a></li>
<li><a href="#">店舗一覧</a></li>
</ul>
</nav>
<div class="openbtn">
<span></span>
<span></span>
<span></span>
</div>
<nav id="g-nav">
<div id="g-nav-list">
<!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
<ul>
<li><a href="#">HOME</a></li>
<div class="section s_01">
<div class="accordion_one">
<div class="accordion_header">
商品一覧
<div class="i_box"><i class="one_i"></i></div>
</div>
<div class="accordion_inner">
<div class="box_one">
<p><a href="#">化粧品</a></p>
<p><a href="#">乳液</a></p>
<p><a href="#">UVケア</a></p>
<p><a href="#">美容液</a></p>
<p><a href="#">クリーム</a></p>
</div>
</div>
</div>
</div>
<li><a href="#">DEMOメンバークラブ</a></li>
<li><a href="#">オンライン肌測定</a></li>
<div class="sns-wrapper">
<div class="x-logo">
<a href="#" target="blank">
<img src="img/beauty_lp/x.png" alt="エックスロゴ" />
</a>
</div>
<div class="insta-logo">
<a href="#" target="blank">
<img src="img/beauty_lp/insta.png" alt="インスタロゴ" />
</a>
</div>
</div>
</ul>
</div>
</nav>
</div>
</div>
</header>
<main>
<section class="scroll-point" id="area-1">
<h2>Area 1</h2>
<p>内容が入ります。</p>
<!--/area1--></section>
<section class="scroll-point" id="area-2">
<h2>Area 2</h2>
<p>内容が入ります。</p>
<!--/area2--></section>
<section class="scroll-point" id="area-3">
<h2>Area 3</h2>
<p>内容が入ります。</p>
<!--/area3--></section>
<section class="scroll-point" id="area-4">
<h2>Area 4</h2>
<p>内容が入ります。</p>
<!--/area4--></section>
<!--/main--></main>
<footer id="footer">
<small>© copyright.</small>
</footer>
</body>③ body 終了タグ直前に JS、動きを制御する自作のJS の2 つを読み込みます。＊wordpressでfunctionにて設定の場合は省略
<!--自作のJS-->
<script src="js/5-1-14.js"></script>
</body>④ WordpressでのfunctionでのCDNとファイルの読み込みは下記より。
//CSSとJSの読み込み
function my_enqueue_scripts()
{
$version = wp_get_theme()->get( 'Version' );
wp_enqueue_style('index-style', get_template_directory_uri() . '/css/index.css', array(), $version);
wp_enqueue_style('singular-style', get_template_directory_uri() . '/css/singular.css', array(), $version);
wp_enqueue_style('content-style', get_template_directory_uri() . '/css/content.css', array(), $version);
wp_enqueue_style('archive-style', get_template_directory_uri() . '/css/archive.css', array(), $version);
wp_enqueue_style('comments-style', get_template_directory_uri() . '/css/comments.css', array(), $version);
wp_enqueue_style('404-style', get_template_directory_uri() . '/css/404.css', array(), $version);
wp_enqueue_style('search-form-style', get_template_directory_uri() . '/css/searchform.css', array(), $version);
wp_enqueue_style('search-style', get_template_directory_uri() . '/css/search.css', array(), $version);
wp_enqueue_style('sidebar-style', get_template_directory_uri() . '/css/sidebar.css', array(), $version);
wp_enqueue_style('header-style', get_template_directory_uri() . '/css/header.css', array(), $version);
wp_enqueue_style('footer-style', get_template_directory_uri() . '/css/footer.css', array(), $version);
wp_enqueue_style('navi-style', get_template_directory_uri() . '/css/navi.css', array(), $version);
wp_enqueue_style('navi-accordion-style', get_template_directory_uri() . '/css/navi-accordion.css', array(), $version);
wp_enqueue_style('catego-navi-style', get_template_directory_uri() . '/css/catego-navi.css', array(), $version);
wp_enqueue_style('button-style', get_template_directory_uri() . '/css/button.css', array(), $version);
wp_enqueue_script('navi-script', get_template_directory_uri() . '/js/navi.js', array('jquery'), $version, true);
wp_enqueue_script('catego-navi-script', get_template_directory_uri() . '/js/catego-navi.js', array('jquery'), $version, true);
wp_enqueue_script('page-top-script', get_template_directory_uri() . '/js/page-top.js', array('jquery'), $version, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');⑤ header.phpの>head>内で下記を使って読み込み。
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの呼び出し-->
<?php wp_head(); ?><!--システム・プラグイン用-->CSSでコーディング
STEP2 cssコード
/*モーダルバナー*/
.modal-banner {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-banner.show {
display: block;
animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: fadeIn 0.3s ease;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate(-50%, -45%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
.modal-close {
position: absolute;
top: 12px;
right: 12px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
font-size: 24px;
line-height: 1;
z-index: 1;
transition: background 0.2s;
}
.modal-close:hover {
background: rgba(0, 0, 0, 0.9);
}
.modal-content img {
width: 300px;//*ふつうは600px*/
height: auto;
display: block;
}
@media (max-width: 560px) {
.modal-content img {
max-width: 350px;
height: auto;
display: block;
}
}
/* スクロール禁止用 */
body.no-scroll {
overflow: hidden !important;
position: fixed;
width: 100%;
left: 0;
right: 0;
}
/*ヘッダー設定*/
body{
height:5000px;
}
.header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
transition: 0.5s;
z-index: 9000;
}
.header.hide {
top: -80px;
}
.header .header_inner {
display: flex;
align-items: center;
justify-content: space-between; /* 右寄せ */
height: 40px;
padding: 20px;
}
.header .header_inner .bland_logo {
width: auto; /* 100%をやめる */
flex: none;
margin-right: 32px; /* ナビとの間隔は任意 */
}
.header_right {
display: flex;
align-items: center;
gap: 16px; /* ナビとハンバーガーの間隔 */
}
/*PCナビゲーションの設定*/
.pc-nav {
display: flex;
align-items: center;
margin-right: 150px;
flex: none;
}
@media (max-width: 768px) {
.pc-nav {
display: none;
}
}
.pc-nav ul {
display: flex;
gap: 30px;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.pc-nav ul li {
text-align: center;
}
.pc-nav a {
display: block;
width: 100%;
padding: 8px 0;
color: #333;
text-decoration: none;
font-weight: 500;
font-size: 15px;
border-radius: 4px;
transition: background 0.2s, color 0.2s;
}
.pc-nav a:hover {
color: #e6007e;
}
/*ハンバーガーナビの設定*/
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position: fixed;
z-index: 999;
/*ナビのスタート位置と形状*/
top: 0;
right: -120%;
width: 60%;
/*半分とか調整をする際は、g-nav-listも合わせる*/
height: 100vh;
/*ナビの高さ*/
background: #fff;
/*動き*/
transition: all 0.6s;
}
@media (min-width: 48rem) {
#g-nav {
width: 40%;
}
}
#g-nav.panelactive {
right: 0;
}
#g-nav.panelactive #g-nav-list {
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width: 60%;
/*半分とか調整をする際は、g-navも合わせる*/
height: 100vh;
/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 48rem) {
#g-nav.panelactive #g-nav-list {
width: 40%;
}
}
#g-nav ul {
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
left: 5%;
margin-top: 100px;
}
@media (min-width: 64.375rem) {
#g-nav ul {
left: 10%;
}
}
#g-nav ul .sns-wrapper {
display: flex;
gap: 20px;
margin-top: 10px;
margin-left: 10px;
}
#g-nav ul .sns-wrapper .x-logo a img {
width: 20px;
height: 20px;
}
@media (min-width: 48rem) {
#g-nav ul .sns-wrapper .x-logo a img {
width: 35px;
height: 35px;
}
}
#g-nav ul .sns-wrapper .insta-logo a img {
width: 25px;
height: 25px;
}
@media (min-width: 48rem) {
#g-nav ul .sns-wrapper .insta-logo a img {
width: 40px;
height: 40px;
}
}
#g-nav li {
font-size: 1.5rem;
list-style: none;
text-align: left;
}
@media (min-width: 48rem) {
#g-nav li {
font-size: 2rem;
}
}
#g-nav li li:not(:first-child) {
margin-top: 20px;
}
#g-nav li a {
color: #000;
text-decoration: none;
padding: 10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/*========= ボタンのためのCSS ===============*/
.openbtn {
position: absolute;
z-index: 9999;
/*ボタンを最前面に*/
top: 15px;
right: 10px;
cursor: pointer;
width: 45px;
height: 45px;
}
@media (min-width: 64.375rem) {
.openbtn {
width: 70px;
height: 70px;
}
}
.openbtn span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #000;
width: 45%;
}
.openbtn span:nth-of-type(1) {
top: 15px;
}
.openbtn span:nth-of-type(2) {
top: 23px;
}
.openbtn span:nth-of-type(3) {
top: 31px;
}
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}JSを使ってJSコード作成
STEP3 JSコード（コチラは関係ないがヘッダーがスクロールで隠れます）
(function () {
// モーダルバナーの要素を取得
const modalBanner = document.getElementById("modal-banner");
const modalClose = document.querySelector(".modal-close"); // 閉じるボタン
const modalOverlay = document.querySelector(".modal-overlay"); // 背景オーバーレイ
let hasShown = false; // モーダルを一度表示したかどうかのフラグ
let scrollPosition = 0; // モーダル表示時のスクロール位置を記録
// スクロールイベント
window.addEventListener("scroll", function () {
if (hasShown) return; // すでに表示済みの場合は何もしない
// 6000px以上スクロールしたらモーダルを表示
if (window.scrollY > 6000) {
showModal(); // モーダル表示関数を実行
hasShown = true; // 表示済みフラグをtrueに
}
});
// モーダル表示関数
function showModal() {
scrollPosition = window.pageYOffset; // 現在のスクロール位置を保存
modalBanner.classList.add("show"); // モーダルを表示
// スクロール位置を保持してbodyを固定（スクロール禁止）
document.body.style.top = `-${scrollPosition}px`; // 現在の位置を維持
document.body.classList.add("no-scroll"); // スクロール禁止クラスを追加
}
// モーダル非表示関数
function hideModal() {
modalBanner.classList.remove("show"); // モーダルを非表示
document.body.classList.remove("no-scroll"); // スクロール禁止を解除
document.body.style.top = ""; // topスタイルをリセット
window.scrollTo(0, scrollPosition); // 保存していたスクロール位置に戻る
}
// ×ボタンをクリックしたらモーダルを閉じる
modalClose.addEventListener("click", hideModal);
// オーバーレイ（背景）をクリックしたらモーダルを閉じる
modalOverlay.addEventListener("click", hideModal);
})();
ページ読み込み時: モーダルは非表示、hasShown = false
6000px以上スクロール: モーダルが出現（初回のみ）
モーダル表示中:
現在のスクロール位置を記録
bodyを固定してスクロール禁止
背景にブラー効果（CSS側で設定）
×ボタンまたは背景クリック:
モーダルを閉じる
スクロール禁止を解除
元のスクロール位置に戻る
一度表示したら: hasShown = trueのため、再度スクロールしても表示されない
動作確認は下記から
See the Pen Untitled by K O (@K-O-the-builder) on CodePen.