gsap炫酷网页滚动动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap炫酷网页滚动动画效果代码，鼠标滚动向下滚动试试。

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/grids-personal-use');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Arial', sans-serif;
	background: #FEF2E9;
	color: #fff;
	overflow-x: hidden;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.hero {
	position: relative;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FEF2E9;
	overflow: hidden;
	mask: linear-gradient(var(--degrade), transparent var(--transparent), black var(--black));
	picture {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		img {
			width: 100%;
			height: 100%;
		}
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg,rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.67) 94%);
			z-index: 1;
		}
	}
}

.section {
	position: relative;
	width: 100%;
	height: 100svh;
}

.pixel-loader {
	width: 100%;
	height: 100%;
	object-fit: cover;
	scale: 1.4;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	filter: contrast(0%) saturate(0%);
}

.pixel-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 3px,
			rgba(0,0,0,0.3) 3px,
			rgba(0,0,0,0.3) 6px
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 3px,
			rgba(0,0,0,0.3) 3px,
			rgba(0,0,0,0.3) 6px
		);
	mix-blend-mode: multiply;
	opacity: 1;
}

.content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
}

.content-after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	mask: linear-gradient(var(--degrade2), transparent var(--transparent2), black var(--black2));
	isolation: isolate;
}

.content-before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	background: #1b2c30;
	z-index: -1;
	mask: linear-gradient(-105deg, transparent var(--transparent3), black var(--black3));
}

.title {
	width: 100%;
	height: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Grids Personal Use', sans-serif;
	h1 {
		font-size: clamp(2rem, 8vw, 6rem);
	}
}

.description {
	width: 100%;
	height: 20%;
	padding-inline: 20px;
	display: flex;
	align-items: end;
	padding-bottom: 20px;
	div {
		width: 50%;
	}
	div:nth-of-type(1) {
		h2 {
			font-size: clamp(2rem, 4vw, 3rem);
			font-family: 'Montserrat', sans-serif;
			font-weight: 600;
			margin-bottom: 10px;
		}
		p {
			font-size: clamp(1rem, 2vw, 1rem);
			font-family: 'Montserrat', sans-serif;
			font-weight: 400;
		}
	}
	div:nth-last-of-type(1) {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 20px;
		text-align: end;
		font-family: 'Montserrat', sans-serif;
	}
}

.gallery-section {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120vw;
	height: 100svh;
	background: #333;
	z-index: 2;
	mask: linear-gradient(105deg, transparent var(--transparent4), black var(--black4));
}

.gallery-section .images {
	margin: auto;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	background: #333;
	display: flex;
	justify-content: center;
	gap: 20px;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		will-change: transform, opacity;
	}
}

.pixel-loader {
	will-change: filter, transform;
}

.pixel-overlay {
	will-change: opacity;
}

.content-after,
.content-before,
.gallery-section {
	will-change: filter;
}

.wrapper-action {
	will-change: transform;
}

.futuristic-barcode {
	--glow-color: 0, 255, 136;
	--glow-intensity: 0.3;
	--pulse-duration: 2s;
	will-change: filter;
	filter: drop-shadow(0 0 10px rgba(var(--glow-color), var(--glow-intensity)));
	animation: barcodePulse var(--pulse-duration) ease-in-out infinite alternate;
}

@keyframes barcodePulse {
	0% { 
		filter: drop-shadow(0 0 5px rgba(var(--glow-color), 0.2)); 
	}
	100% { 
		filter: drop-shadow(0 0 15px rgba(var(--glow-color), 0.6)); 
	}
}

.futuristic-barcode rect {
	--flicker-duration: calc(0.1s + (var(--bar-index) % 2) * 0.05s);
	will-change: opacity;
	animation: barFlicker var(--flicker-duration) ease-in-out infinite alternate;
}

@keyframes barFlicker {
	0% { 
		opacity: 0.7; 
	}
	100% { 
		opacity: 1; 
	}
}

.futuristic-barcode line {
	--scan-delay: calc((var(--scan-index) - 1) * 0.5s);
	will-change: transform, opacity;
	animation: scanMove 3s linear infinite var(--scan-delay);
}

@keyframes scanMove {
	0% { 
		transform: translateX(-120px); opacity: 0; 
	}
	10% { 
		opacity: 1; 
	}
	90% { 
		opacity: 1; 
	}
	100% { 
		transform: translateX(120px); opacity: 0; 
	}
}

.futuristic-barcode circle[style*="--data-index"] {
	will-change: transform, opacity;
	animation: dataPulse 1.5s ease-in-out infinite;
}

@keyframes dataPulse {
	0%, 100% { 
		r: 1; 
		opacity: 0.8; 
	}
	50% { 
		r: 2; 
		opacity: 1; 
	}
}

.futuristic-barcode circle[style*="--particle-index"] {
	--particle-delay: calc((var(--particle-index) - 1) * 0.8s);
	will-change: transform, opacity;
	animation: particleFloat 4s ease-in-out infinite var(--particle-delay);
}

@keyframes particleFloat {
	0%, 100% { transform: translateY(0px) scale(1); opacity: 0.7; }
	25% { transform: translateY(-10px) scale(1.2); opacity: 1; }
	50% { transform: translateY(0px) scale(0.8); opacity: 0.5; }
	75% { transform: translateY(10px) scale(1.1); opacity: 0.9; }
}

.hero-barcode-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity, scale;
}

.hero-barcode {
	--hero-glow-color: 0, 255, 136;
	--hero-glow-intensity: 0.5;
	--hero-pulse-duration: 3s;
	will-change: filter;
	filter: drop-shadow(0 0 20px rgba(var(--hero-glow-color), var(--hero-glow-intensity)));
	animation: heroBarcodePulse var(--hero-pulse-duration) ease-in-out infinite alternate;
}

@keyframes heroBarcodePulse {
	0% { 
		filter: drop-shadow(0 0 10px rgba(var(--hero-glow-color), 0.3)); 
	}
	100% { 
		filter: drop-shadow(0 0 30px rgba(var(--hero-glow-color), 0.8)); 
	}
}

.hero-barcode rect {
	--hero-flicker-duration: calc(0.08s + (var(--bar-index) % 2) * 0.04s);
	will-change: opacity;
	animation: heroBarFlicker var(--hero-flicker-duration) ease-in-out infinite alternate;
}

@keyframes heroBarFlicker {
	0% { 
		opacity: 0.6; 
	}
	100% { 
		opacity: 1; 
	}
}

.hero-barcode line {
	--hero-scan-delay: calc((var(--scan-index) - 1) * 0.7s);
	will-change: transform, opacity;
	animation: heroScanMove 4s linear infinite var(--hero-scan-delay);
}

@keyframes heroScanMove {
	0% { 
		transform: translateX(-200px); opacity: 0; 
	}
	15% { 
		opacity: 1; 
	}
	85% { 
		opacity: 1; 
	}
	100% { 
		transform: translateX(200px); opacity: 0; 
	}
}

.hero-barcode circle[style*="--data-index"] {
	will-change: transform, opacity;
	animation: heroDataPulse 2s ease-in-out infinite;
}

@keyframes heroDataPulse {
	0%, 100% { 
		r: 2; 
		opacity: 0.8; 
	}
	50% { 
		r: 3; 
		opacity: 1; 
	}
}

.hero-barcode circle[style*="--particle-index"] {
	--hero-particle-delay: calc((var(--particle-index) - 1) * 0.8s);
	will-change: transform, opacity;
	animation: heroParticleFloat 5s ease-in-out infinite var(--hero-particle-delay);
}

@keyframes heroParticleFloat {
	0%, 100% { 
		transform: translateY(0px) scale(1); 
		opacity: 0.7; 
	}
	25% { 
		transform: translateY(-15px) scale(1.3); 
		opacity: 1; 
	}
	50% { 
		transform: translateY(0px) scale(0.9); 
		opacity: 0.6; 
.........完整代码请登录后点击上方下载按钮下载查看