【CSS】【Javascript】スクロール時に動画を固定・拡大する方法

Webサイトのファーストビューで、スクロールすると動画が拡大しながら表示され、特定のスクロール位置を超えたら通常のスクロールに戻る動作を実装する方法を紹介します。

実装の流れ

1. .fv の表示を特定のスクロール位置まで position: fixed で固定する。
2. スクロールに応じて .fv_video を拡大 (transform: scale()) し、ぼやける (filter: blur())。
3. 指定のスクロール位置を超えたら .fv の固定を解除し、通常のスクロールに戻す。

HTML

<div class="fv">
    <video autoplay loop muted playsinline class="fv_video">
        <source src="img/fv_video_3_s.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="fv_txt">
        <div class="logo_icon"><img src="img/logo_icon_s.png"></div>
        <h2 class="fadeIn fade_up visible">つなげる、広げる<br>ビジネスの可能性</h2>
        <p class="fadeIn fade_up visible">connect, expand business potential</p>
    </div>
</div>
<div class="content">
    <p>ここから下のコンテンツ...</p>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 200vh; /* デモ用にページを長く */
}

.fv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    z-index: 10;
}

.fv_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out, filter 0.5s ease-out;
}

.content {
    position: relative;
    z-index: 5;
    background: white;
    padding: 50px;
}

JavaScript

document.addEventListener("scroll", function () {
    let scrollY = window.scrollY;
    let maxScroll = 500; // 固定解除するスクロール位置

    let fv = document.querySelector(".fv");
    let fvVideo = document.querySelector(".fv_video");

    // 拡大率とぼかしの設定
    let scaleValue = 1 + Math.min(scrollY / 1000, 0.5); // 最大で1.5倍
    let blurValue = Math.min(scrollY / 100, 5); // 最大 5px までぼかす

    fvVideo.style.transform = `scale(${scaleValue})`;
    fvVideo.style.filter = `blur(${blurValue}px)`;

    // 一定のスクロール位置を超えたら固定を解除
    if (scrollY >= maxScroll) {
        fv.style.position = "relative";
    } else {
        fv.style.position = "fixed";
    }
});

動作の説明

1. .fv は最初 position: fixed で画面に固定される。
2. スクロールすると .fv_video が拡大し、ぼかし効果が加わる。
3. スクロール位置が 500px を超えると、.fv の position を relative に変更し、通常のスクロールに戻る。

この方法を使えば、印象的なファーストビューの演出が可能になります。ぜひ活用してみてください！