svg实现视频背景蒙版滚动效果代码
代码语言:html
所属分类:背景
代码描述:svg实现视频背景蒙版滚动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0" /> <style> @import url('//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css') layer(normalize); @layer normalize, base, demo, scroll, debug; @layer scroll { @supports (animation-timeline: scroll()) { @property --active { initial-value: 0; inherits: true; syntax: '<number>'; } p span { -webkit-animation: activate both ease-in-out; animation: activate both ease-in-out; animation-timeline: view(); opacity: 0; } @-webkit-keyframes activate { 50% { opacity: 1; } } @keyframes activate { 50% { opacity: 1; } } :root { --scroll-ease: linear( -0 0%, 0.0048 9.8%, 0.0192 19.5%, 0.043 29.02%, 0.0761 38.26%, 0.1181 47.13%, 0.1685 55.56%, 0.227 63.44%, 0.2929 70.71%, 0.3656 77.3%, 0.4445 83.15%, 0.5285 88.19%, 0.6173 92.39%, 0.7099 95.7%, 0.805 98.08%, 0.9021 99.52%, 1 100% ); } .section__content svg:nth-of-type(1) path { --dest: 0; stroke-dashoffset: 1.025; stroke-dasharray: 1.025; -webkit-animation: draw both var(--scroll-ease); animation: draw both var(--scroll-ease); animation-timeline: view(); animation-range: entry 25% entry 75%; } .section__content { margin-bottom: 15vh; } .section__buffer { position: absolute; top: 100%; left: 0; right: 0; height: 15vh; background: linear-gradient(canvas, transparent); } .section__content svg:nth-of-type(2) { translate: 0 2%; } .section__content svg:nth-of-type(2) path { stroke-dashoffset: 0; stroke-dasharray: 1.025; --dest: -1.025; -webkit-animation: draw both ease-out; animation: draw both ease-out; animation-timeline: view(); animation-range: exit -25% exit 50%; } @-webkit-keyframes draw { to { stroke-dashoffset: var(--dest, 1.025); } } @keyframes draw { to { stroke-dashoffset: var(--dest, 1.025); } } footer { view-timeline: --footer; } footer h2 { -webkit-animation: reveal both linear; animation: reveal both linear; animation-timeline: --footer; animation-range: entry 75% entry 100%; position: fixed; } @-webkit-keyframes reveal { 0% { filter: blur(10px); opacity: 0; } } @keyframes reveal { 0% { filter: blur(10px); opacity: 0; } } } } @layer debug { [data-blend='false'] .section__content { mix-blend-mode: normal; } [data-debug='true'] .section__content::before { content: ''; position: absolute; inset: 0; border: 10px dashed hotpink; } [data-debug='true'] .section__content svg { outline: 10px dashed hotpink; } } @layer demo { :root { --bg: black; } header { height: 100vh; display: grid; place-items: center; background: linear-gradient(transparent 50%, canvas); } section { position: relative; } .section__content { background: white; mix-blend-mode: lighten; z-index: 2; } .section__text { background: var(--bg); height: 100vh; display: grid; place-items: center; } .section__stick { position: absolute; inset: 0; top: 0; /* height: 100vh; */ place-items: center; z-index: -1; } .section__content svg { overflow: visible !important; } .section__text p { margin: 0; --font-level: 5; color: white; /* background: black; */ display: flex; flex-direction: column; gap: 2lh; font-weight: 600; align-items: center; justify-content: center; text-wrap: balance; text-align: center; } footer { height: 100vh; display: grid; align-content: end; position: relative; } footer h2 { --font-level: 5; text-transform: none; opacity: 1; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -2; } video { position: sticky; top: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100vh; filter: brightness(0.65); } footer { padding: 2rem; text-align: center; } header { align-content: center; } h1 { --font-level: 7; position: relative; margin: 0; } h1 span { position: absolute; bottom: 100%; left: 50%; display: inline-block; translate: -50% 50%; font-size: 0.2em; text-transform: uppercase; white-space: nowrap; color: hsl(6 100% 50%); } h2 { --font-level: 1; margin: 0; opacity: 0.5; text-transform: uppercase; } } @layer base { :root { --font-size-min: 16; --font-size-max: 20; --font-ratio-min: 1.2; --font-ratio-max: 1.33; --font-width-min: 320; --font-width-max: 1500; } :where(.fluid) { --fluid-min: calc( var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0)) ); --fluid-max: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0