快捷導(dǎo)航

前端實現(xiàn)視頻Banner+滾屏視頻效果圖及代碼

更新時間：2026年05月22日 10:46:24 作者：亞里士多德芙

Banner已成為高端官網(wǎng)標(biāo)配,它能創(chuàng)造沉浸式體驗,這篇文章主要介紹了前端實現(xiàn)視頻Banner+滾屏視頻效果圖及代碼的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

視頻Banner

效果圖：

貼代碼：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>視頻 Banner 示例</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
        }

        .video-banner {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        #video-background {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
            transform: translate(-50%, -50%);
        }

        .video-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            z-index: 1;
        }

        .video-content h1 {
            font-size: 3em;
            margin: 0;
        }

        .video-content p {
            font-size: 1.5em;
            margin: 10px 0 30px;
        }

        .video-content .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #662d91;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1.2em;
            transition: background-color 0.3s ease;
        }

        .video-content .btn:hover {
            background-color: #50247a;
        }

    </style>
</head>

<body>
    <header class="video-banner">
        <video autoplay muted loop id="video-background">
            <source src="./assets/1080p.mp4" type="video/mp4">
            您的瀏覽器不支持 video 標(biāo)簽。
        </video>
        <div class="video-content">
            <h1>歡迎來到立橋銀行</h1>
            <p>立足港澳，橋連世界</p>
            <a href="#more" rel="external nofollow"  class="btn">了解更多</a>
        </div>
    </header>
</body>

</html>

滾屏視頻

貼代碼：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滾屏動畫視頻示例</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }

        .scroll-video-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }

        #scroll-video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            object-fit: cover;
        }

        #content {
            height: 1000px;
            /* 調(diào)整高度以適應(yīng)滾動 */
            overflow-y: scroll;
            scroll-behavior: smooth;
        }

        .section {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .section h1 {
            font-size: 3em;
            margin: 0;
        }

        .section p {
            font-size: 1.5em;
            margin: 10px 0 30px;
        }
    </style>
</head>

<body>
    <div class="scroll-video-container">
        <video id="scroll-video" src="./assets/section-3-desktop-900-264-crf-20-g-1.mp4" muted></video>
    </div>

    <section id="content">
        <div class="section" id="section1">
            <h1>歡迎來到立橋銀行</h1>
            <p>立足港澳，橋連世界</p>
        </div>
        <div class="section" id="section2">
            <h1>我們的服務(wù)</h1>
            <p>提供多種金融服務(wù)，滿足您的需求</p>
        </div>
        <div class="section" id="section3">
            <h1>聯(lián)系我們</h1>
            <p>了解更多詳情，請聯(lián)系我們</p>
        </div>
    </section>

    <script>

        document.addEventListener('DOMContentLoaded', () => {
            const video = document.getElementById('scroll-video');
            const content = document.getElementById('content');
            const totalHeight = content.scrollHeight - window.innerHeight;
            let lastScrollTop = 0;
            let timeoutId;

            content.addEventListener('scroll', () => {
                const scrollPosition = content.scrollTop / totalHeight;
                const videoDuration = video.duration;
                const currentTime = scrollPosition * videoDuration;

                // 播放視頻
                video.currentTime = currentTime;
                video.play();

                // 清除之前的定時器
                clearTimeout(timeoutId);

                // 設(shè)置一個新的定時器，在用戶停止?jié)L動后暫停視頻
                timeoutId = setTimeout(() => {
                    video.pause();
                }, 100); // 100毫秒后暫停視頻
            });
        });
    </script>
</body>

</html>