原生JS实现全屏视频背景滚动淡出

给大家分享一个用原生JS实现全屏视频背景滚动淡出，效果如下 :

以下是代码实现，欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>原生JS实现全屏视频背景滚动淡出</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: '微软雅黑', sans-serif;}body {background: #000;}section {position: relative;width: 100%;min-height: 100vh;display: flex;align-items: center;justify-content: center;overflow: hidden;padding: 100px;}section video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;pointer-events: none;}section h2 {position: relative;color: #fff;font-size: 3em;}section p {position: relative;color: #fff;font-size: 1.2em;}</style>
</head><body><section><video src=" https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/bg3.mp4" muted autoplay loop></video></section><section><div class="content"><h2>以劳动书写人生风采</h2><p>中华民族是一个热爱劳动的民族，劳动精神自古以来就流淌在中国人民的血脉之中，去不掉、打不破、灭不了。“幸福是奋斗出来的”，个人追求的实现，离不开不懈奋斗劳动;家国复兴的使命，也只有靠劳动来成就。</p></div></section><script>let video = document.querySelector('video')window.addEventListener('scroll', function () {let value = 1 + window.scrollY / -600video.style.opacity = value});</script>
</body></html>

原生JS实现全屏视频背景滚动淡出相关推荐

HTML5轻松实现全屏视频背景
想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...
htmlcss全屏视频背景
在来练习一个全屏视频背景的项目: 代码如下: <!DOCTYPE html> <html> <head><meta charset="utf-8&q ...
原生js实现大屏数字上下滚动效果，支持随机多位数字
一文看懂大屏数字滚动前言一.html 二.js生成展示的元素三.css实现样式四.加入动画和定时器前言在大屏项目中经常需要实现那种数字上下滚动的效果,普通的数字随机滚动在UI组件(例如Vi ...
css+全屏视频背景+响应式布局
记录自己做网页的过程,便于以后忘记回来学习. 视频背景用一个视频作为网页的背景,视频大小会随窗口大小变化(响应式布局) html代码: <div class="bg-video&qu ...
web端原生js实现全屏和退出全屏（F11功能）
一.在项目中使用按钮进行控制全屏功能 1. 选中要实现全屏功能的元素(一般是一个按钮) var $fullBtn = document.querySelector('.fullBtn') //全屏按钮 ...
原生JS实现全屏和退出全屏详解
网页（全屏）背景图实现方式（纯CSS向）
全屏背景的意思就是背景图占满整个浏览器视窗,在没有body其他内容的时候不出现滚动条.就算有滚动条的时候,背景也是固定的,不跟随滚动. 对于这类的全屏背景图片的实现,我们需要注意的是,有五种情况: 图 ...
html纵向滚动特效,带视觉差效果的垂直全屏整页滚动特效
这是一款效果非常炫酷的带视觉差效果的垂直全屏整页滚动特效.该特效使用jQuery和CSS3完成,用户可以通过滚动鼠标来一次垂直切换一个页面,在页面切换的时候还带有一些视觉差特效. 使用方法 HTML结 ...
002-全屏视频背景
002-全屏视频背景(Fullscreen Video Background) <!DOCTYPE html> <html lang="en"><he ...

原生JS实现全屏视频背景滚动淡出

原生JS实现全屏视频背景滚动淡出相关推荐

最新文章

热门文章