div+css布局实现滚动网页相册瀑布流交互效果代码-html代码-BFW代码库

div+css布局实现滚动网页相册瀑布流交互效果代码

代码语言：html

代码描述：div+css布局实现滚动网页相册瀑布流交互效果代码

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


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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,100..900;1,100..900&family=Tangerine:wght@700&display=swap');

@property --prg {
	syntax: '<number>';
	initial-value: 0;
	inherits: true;
}

@property --out {
	syntax: '<number>';
	initial-value: 0;
	inherits: true;
}

@property --hov {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

/* needed for Firefox */
@property --x {
	syntax: '<length>';
	initial-value: 0px;
	inherits: true;
}

@property --y {
	syntax: '<length>';
	initial-value: 0px;
	inherits: true;
}

* { margin: 0 }

html, body, header, main, footer, figure, em { display: grid }

html {
	container-type: inline-size;
	height: 100%;
	background: #bababa
}

body {
	--y: 30vh;
	--x: 100cqw;
	--out: round(up, var(--prg));
	--max: Min(22.5deg, atan2(var(--y), var(--x)));
	--ang: calc(var(--max)*(1 - 2*var(--prg)));
	--tan: tan(abs(var(--ang)));
	--sgn: sign(var(--ang));
	--bit: calc(.5*(var(--sgn) + 1));
	--dy: calc(100cqw*var(--tan));
	font: clamp(.75em, 3vw, 1.5em)/ 1 genos, sans-serif;
	filter: drop-shadow(1px 2px 3px);
	animation: prg 1s linear;
	animation-timeline: scroll();
	
	@supports not (scale: abs(-2)) {
		--tan: tan(max(var(--ang), -1*var(--ang)))
	}
	
	@supports not (scale: sign(-2)) {
		--sgn: clamp(-1, tan(var(--ang))*10000, 1)
	}
}

@supports (animation-timeline: scroll()) {
	@keyframes prg { to { --prg: 1 } }
}

header, footer, main { box-sizing: border-box }

header, footer {
	--dy0: (1 - var(--bit))*var(--dy);
	--dy1: var(--bit)*var(--dy);
	grid-gap: 2em;
	place-content: center;
	height: 100vh;
	height: calc(100dvh + .5*var(--dy));
	background: #212121;
	color: #dedede;
	text-wrap: balance
}

header {
	padding-bottom: var(--dy);
	text-align: center;
	clip-path: 
		polygon(0 0, 100% 0, 
			100% calc(100% - var(--dy0)), 
			0 calc(100% - var(--dy1)));
	transition: --out 1s ease-out, 
		--hov calc(var(--hov)*6s) linear;
	
	&:hover { --hov: 1 }
}

h1, em {
	translate: 0 calc(var(--prg)*300vh);
	opacity: calc(1 - var(--out));
	filter: blur(calc(var(--out)*8px)) 
		url(#dissolve)
}

h1 {
	max-width: 9em;
	font-size: 2.5em;
	font-weight: 500
}

em {
	place-items: center;
	letter-spacing: calc(.25em*(1 - cos(var(--hov)*3turn)));
	
	&::after {
		padding: .5em;
		border: solid 0;
		border-width: 0 3px 3px 0;
		translate: 0 calc(50%*(1 - cos(var(--hov)*3turn)));
		rotate: 45deg;
		content: ''
	}
}

main {
	grid-gap: .5em;
	grid-template-columns: 
		repeat(auto-fit, minmax(min(100%, 12em), 1fr));
	margin: calc(-.5*var(--dy)) 0;
	padding: .5em;
	transform: skewy(var(--ang))
}

figure {
	grid-template: 100%/ 100%;
	place-items: center end;
	container-type: size;
	overflow: hidden;
	aspect-ratio: 2/ 1;
	clip-path: inset(1px round 4px);
	transition: .35s;
	transition-property:.........完整代码请登录后点击上方下载按钮下载查看