前端实现视频Banner+滚屏视频效果图及代码

更新时间：2026年05月22日 10:46:24 作者：亚里士多德芙

Banner已成为高端官网标配,它能创造沉浸式体验,这篇文章主要介绍了前端实现视频Banner+滚屏视频效果图及代码的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

视频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 标签。
        </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;
            /* 调整高度以适应滚动 */
            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>我们的服务</h1>
            <p>提供多种金融服务，满足您的需求</p>
        </div>
        <div class="section" id="section3">
            <h1>联系我们</h1>
            <p>了解更多详情，请联系我们</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);

                // 设置一个新的定时器，在用户停止滚动后暂停视频
                timeoutId = setTimeout(() => {
                    video.pause();
                }, 100); // 100毫秒后暂停视频
            });
        });
    </script>
</body>

</html>

总结

到此这篇关于前端实现视频Banner+滚屏视频效果图及代码的文章就介绍到这了,更多相关前端实现视频Banner内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

前端必会的Webpack优化技巧
这篇文章主要为大家介绍了前端必会的Webpack优化技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
JavaScript编程的10个实用小技巧
尽管我使用Javascript来做开发有很多年了，但它常有一些让我很惊讶的小特性。对于我来说，Javascript是需要持续不断的学习的。
2014-04-04
javascript 另一种图片滚动切换效果思路
把图片们用ul之类的包起来，并设置float。然后设置这个ul本身为absolute定位，其父标签用relative定位。通过设置ul的left或top值，实现图片队列的滚动效果
2012-04-04
原生js提示框并自动关闭(手工关闭)
今天在写后台交互的时候原来都是用alert太难看每次都需要点击一下才可以，比较麻烦所以特整理了几个比较好的js提示框代码，方便提示一下
2023-04-04
详解JavaScript设计模式中的享元模式
享元模式是一种用于性能优化的模式。享元模式的核心是运用共享技术来有效支持大量细粒度的对象.如果系统中创建了大量类似的对象而导致内存占用过高，本文通过介绍书中文件上传的优化案例来说明享元模式的使用方式和作用,需要的朋友可以参考下
2023-06-06
JavaScript 浮点数运算精度问题
JavaScript小数在做四则运算时，精度会丢失，这会在项目中引起诸多不便，先请看下面脚本。
2009-10-10
JavaScript判断文件上传类型的方法
这篇文章主要介绍了JavaScript判断文件上传类型的方法,可实现针对重复的内容也能触发onchange事件,需要的朋友可以参考下
2014-09-09
javascript IFrame 强制刷新代码
经常会使用多个iframe来展示领域模型主子关系(主/子单)，测试发现iframe是有cache功能的
2009-07-07
JS中的Date()使用小结
Date() 日期对象是一个构造函数必须使用new来调用创建我们的日期对象,本文给大家介绍JS中的Date()使用小结,感兴趣的朋友一起看看吧
2024-01-01
uniapp获取底部安全距离以及状态栏高度等
最近在用uniapp开发的时候遇到了一些问题,下面这篇文章主要给大家介绍了关于uniapp获取底部安全距离以及状态栏高度等的相关资料,需要的朋友可以参考下
2022-10-10