gsap+ScrollTrigger实现暗色亮色切换的视频背景页面滚动文字动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap+ScrollTrigger实现暗色亮色切换的视频背景页面滚动文字动画效果代码，鼠标滚轮向下滚动看到效果。

代码标签： gsap ScrollTrigger 暗色亮色切换视频背景页面滚动文字动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
*,
*:after,
*:before {
	box-sizing: border-box;
}

:root {
	--font-size: clamp(2rem, 8vmin + 1rem, 4rem);
	--line: color-mix(in lch, canvasText 15%, transparent);
	--base: 0.4;
	--accent: hsl(8 100% 55%);
	--header-height: 100vh;
	--overlay: color-mix(in lch, canvas 70%, transparent);
	color-scheme: dark only;
}

:root[data-theme='light'] {
	--base: 0.3;
	--line: color-mix(in lch, canvasText 35%, transparent);
	--overlay: color-mix(in lch, canvas 70%, transparent);
	color-scheme: light only;
}

html:not(:focus-within) {
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
		Helvetica, Arial, sans-serif, system-ui;
	background: canvas;
}

body::before {
	--size: 60px;
	content: '';
	height: 100vh;
	width: 100vw;
	position: fixed;
	background: linear-gradient(
				90deg,
				var(--line) 1px,
				transparent 1px var(--size)
			)
			50% 50% / var(--size) var(--size),
		linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
			var(--size) var(--size);
	-webkit-mask: linear-gradient(-15deg, transparent 40%, white);
	        mask: linear-gradient(-15deg, transparent 40%, white);
	top: 0;
	transform-style: flat;
	pointer-events: none;
	z-index: -1;
}

:is(h1, h2) {
	font-size: clamp(2rem, 3vw + 1rem, 6rem);
}

[href='#read'] {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	translate: -50% 0;
	width: 48px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	color: canvasText;
}
[href='#read'] svg {
	width: 75%;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

[data-split] {
	font-size: var(--font-size);
	font-weight: 600;
}

header {
	min-height: var(--header-height);
	display: grid;
	place-items: center;
	position: relative;
	transform-origin: 50% 0%;
}

h1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

h1 > span:first-of-type {
	font-size: 0.35em;
	color: var(--accent);
	text-transform: uppercase;
}

header > section {
	position: relative;
	top: 0;
	min-height: var(--header-height);
	width: 100%;
	translate: 0 -100%;
	display: grid;
	place-items: center;
	background: var(--overlay);
}

header > section::before {
	content: '';
	background: var(--overlay);
	position: absolute;
	inset: 0;
	translate: 0 100%;
}

video {
	position: sticky;
	top: 0;
	height: var(--header-height);
	width: 100vw;
	-o-object-fit: cover;
	   object-fit: cover;
	background: canvas;
}

footer {
	text-align: center;
	padding: 2rem;
	opacity: 0.875;
}

section:not(.reader) {
	min-height: 100vh;
	display: grid;
	place-items: center;
}

.content {
	position: sticky;
	top: 0;
	min-height: 100vh;
	width: 100ch;
	padding: 2rem 0;
	max-width: calc(100% - 4rem);
	display: grid;
	place-items: center;
	margin: 0 auto;
	line-height: 1;
}

.content span {
	opacity: calc(var(--base) + (var(--active)));
	transition: opacity 0.5s;
}

.reader {
	--thick: 0px;
	outline: var(--thick) dashed var(--accent);
	outline-offset: calc(var(--thick) * -1);

	/* The trick here is that --ppc could be dynamic	*/
	height: calc(
		((var(--ppc) * var(--content-length) + (var(--pad) * var(--buffer))) * 1px) + 100vh
	);
}

.bear-link {
	color: canvasText;
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: 48px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 6px;
	/*	background: canvas;*/
	z-index: 2;
}

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
	opacity: 1;
}
.bear-link svg {
	opacity: 0.8;
	width: 75%;
}

.sig path {
	--draw: 1.025;
	--end: 1.025;
	stroke-dasharray: var(--end);
	stroke-dashoffset: var(--draw);
}

.sig :is(.eye, .nose) {
	fill: transparent;
}

.sig {
	width: max(100px, 25vmin);
	color: canvasText;
	position: fixed;
	bottom: 4rem;
	right: 2rem;
	z-index: 10;
	translate: -20% -20%;
	rotate: -15deg;
	pointer-events: none;
}

h2 span {
	color: var(--accent);
}

@supports (animation-timeline: scroll()) {
	@property --active {
		inherits: true;
		initial-value: 0;
		syntax: '<number>';
	}

	.reader {
		view-timeline: --reader block;
	}

	.content span {
		-webkit-animation: activate both steps(1);
		        animation: activate both steps(1);
		animation-timeline: --reader;
		animation-range: contain calc(((var(--start, 0) * var(--ppc)) * 1px))
			contain calc(((var(--end, 0) * var(--ppc)) * 1px));
	}

	@-webkit-keyframes activate {
		to {
			--active: 1;
		}
	}

	@keyframes activate {
		to {
			--active: 1;
		}
	}

	header {
		-webkit-animation: scale-down both ease-in;
		        animation: scale-down both ease-in;
		animation-timeline: view();
		animation-range: exit-crossing;
		view-timeline: --header;
	}

	@-webkit-keyframes scale-down {
		to {
			scale: 0.8 0.8;
		}
	}

	@keyframes scale-down {
		to {
			scale: 0.8 0.8;
		}
	}
	body > section:last-of-type {
		view-timeline-name: --sign-off;
	}

	.sig path {
		-webkit-animation: draw both linear;
		        animation: draw both linear;
		animation-timeline: --sign-off;
		animation-range: entry 20% entry 80%;
	}
	.sig :is(.eye, .nose) {
		-webkit-animation: draw both linear, fill both linear;
		        animation: draw both linear, fill both linear;
		animation-timeline: --sign-off;
	}
	.sig :is(.ear, .eye) {
		animation-range: entry 30% entry 90%;
	}
	.sig .nose {
		animation-range: entry 40% entry 100%;
	}
	@-webkit-keyframes draw {
		to {
			stroke-dashoffset: 0;
		}
	}
	@keyframes draw {
		to {
			stroke-dashoffset: 0;
		}
	}
	@-webkit-keyframes fill {
		to {
			fill: currentColor;
		}
	}
	@keyframes fill {
		to {
			fill: currentColor;
		}
	}
}

.theme-toggle {
	color: var(--color);
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: 48px;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: transparent;
	transition: background 0.2s;
	cursor: pointer;
	z-index: 10;
}

.theme-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: hsl(0 0% 50% / calc(var(--intent, 0) * 0.25));
}

.theme-toggle:is(:hover, :focus-visible) {
	--intent: 1;
}

/*.dark .theme-toggle:is(:hover, :focus-visible) {
	background: hsl(0 0% 30%);
}*/

.theme-toggle[aria-pressed='true'] svg path:last-of-type {
	display: block;
}

.theme-toggle svg {
	color: currentColor;
	width: 50%;
}

.theme-toggle[aria-pressed='true'] svg path:first-of-type,
.theme-toggle svg path:last-of-type {
	display: none;
}

::view-transition-group(root) {
	-webkit-animation-duration: 1.25s;
	        animation-duration: 1.25s;
}
::view-transition-new(root),
::view-transition-old(root) {
	mix-blend-mode: normal;
}

::view-transition-new(root) {
	-webkit-animation-name: reveal-light;
	        animation-name: reveal-light;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
	-webkit-animation: none;
	        animation: none;
}
.dark::view-transition-new(root) {
	-webkit-animation-name: reveal-dark;
	        animation-name: reveal-dark;
}

@-webkit-keyframes reveal-dark {
	from {
		-webkit-clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
		        clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
	}
	to {
		-webkit-clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
		        clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
	}
}

@keyframes reveal-dark {
	from {
		-webkit-clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
		        clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
	}
	to {
		-webkit-clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
		        clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
	}
}

@-webkit-keyframes reveal-light {
	from {
		-webkit-clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
		        clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
	}
	to {
		-webkit-clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
		        clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
	}
}

@keyframes reveal-light {
	from {
		-webkit-clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
		        clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
	}
	to {
		-webkit-clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
		        clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
	}
}
</style>


  
</head>

<body translate="no">
  <a
      class="bear-link"
      href=""
      target="_blank"
      rel="noreferrer noopener"
    >
     logo
    </a>
    <button aria-pressed="false" class="theme-toggle">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          fill="currentColor"
          d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
        />
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          fill="currentColor"
          d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
        />
      </svg>
      <span class="sr-only">Toggle Theme</span>
    </button>
    <header>
      <video
        autoplay
        muted
        loop
        src="//repo.bfw.wiki/bfwrepo/video/662311a3b2165.mp4"
      ></video>
      <section>
        <h1>
          <span>CSS Pro</span>
          <span>Those Little Details</span>
       .........完整代码请登录后点击上方下载按钮下载查看