【コピペ＋利用OK】去年の文化祭で作ったお化け屋敷ページのソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">
    <title>文化祭お化け屋敷 - 墓地の招待状</title>

    <style>
        * {
            font-family: "RocknRoll One", serif;
            font-weight: 400!important;
        }
        body {
            background-image: url('https://ここに背景に入れたい画像いれる');
            background-size: cover;
            background-attachment: fixed;
            color: #aaaaaa ;
            text-align: center;
            line-height: 1.6;
            margin: 0;
            font-size: 2em;
        }
        .flame {
            margin: 5% auto;
            width: 90%;
            max-width: 600px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 20px;
            border: 2px solid #c0c ;
            border-radius: 8px;
        }
        h1, h2 {
            color: #880000 ;
            font-size:1.8em;
        }
        .gallery {
            margin: 20px auto;
            width: 100%;
            max-width: 560px;
        }
        .overlay-image {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            max-width: 80vw;
            max-height: 80vh;
        }
        #scrollview  {
            position: fixed;
            top: 10px;
            left: 10px;
            background: #333 ;
            color: #fff ;
            padding: 5px 10px;
            border-radius: 5px;
            z-index: 1000;
            font-size: 0.8em;
        }
    </style>
</head>
<body>

<div id="scrollview">0/0</div>

<div class="flame">
<header>
    <p>某文化祭 特設企画</p>
    <h1>お化け屋敷 - 墓地の招待状</h1>
    <p>ようこそ。ここでは「墓地での恐怖体験」をテーマにしたお化け屋敷をお届けします。</p>
</header>

<section id="overview">
    <h2>概要</h2>
    <p>放課後、あなたは校内で一本のメモリーカードを拾いました。家に帰り中身を確認すると、不可解な動画が勝手に再生されます。動画の最後には赤い文字で「墓地で待っている」とだけ表示されました。</p>

    <p>その夜、眠りについたあなたは見知らぬ墓地で目を覚まします。冷たい空気、どこからか聞こえる声、誰かが見ているような視線。導かれるように奥へ進むと、古びた墓石には奇妙なメッセージが刻まれていました。</p>

    <p>この場所は何なのか？ なぜここにいるのか？  
    お化け屋敷「墓地の招待状」では、あなたが主人公となり、この不可解な世界を体験します。</p>
</section>

<section id="atraction">
    <h2>アトラクション</h2>
    <p>最後は霊車（ジェットコースター）に乗って墓地を脱出！逃げ道はそれしかない…</p>
</section>

<section id="fare">
    <h2>入場料</h2>
    <p>もちろん無料。霊たちは皆さんを歓迎しています…</p>
</section>

<section id="access">
    <h2>アクセス / 日程</h2>
    <p>開催場所：文化祭特設会場（一般化）<br>
    日程：文化祭期間内</p>
</section>

<section id="gallery">
    <h2>ギャラリー</h2>
    <div class="gallery">
        ここに動画や画像を載せよう。
    </div>
</section>




<img src="" alt="突然現れる怖い画像" class="overlay-image" id="overlay-image">

<script>
    window.addEventListener('scroll', function() {
        const overlayImage = document.getElementById('overlay-image');
        const scrollview = document.getElementById('scrollview');
        const triggerHeight = window.innerHeight * 0.5;

        scrollview.innerHTML = "呪いの進行度:" + 
            (window.scrollY.toFixed()*100 / (document.body.scrollHeight - window.innerHeight)).toFixed(3) + "%";

        if (window.scrollY > triggerHeight && overlayImage.style.display === 'none') {
            overlayImage.style.display = 'block';

            setTimeout(function() {
                overlayImage.style.display = 'none';
            }, 5000);
        }
    });
</script>

</div>
</body>
</html>