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

代码语言：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: --hov, background-color;
	
	:hover > & {
		background: rgba(0 0 0/ calc(1 - var(--hov)))
	}
	
	&:hover, &:focus-within { --hov: 1 }
}

img, figcaption { grid-area: 1/ 1 }

img {
	width: 100%;
	height: calc(100cqh + 100cqw*var(--tan));
	object-fit: cover;
	transform: 
		skewy(calc(-1*var(--ang))) 
		scale(calc(1 + .25*var(--hov)));
	mix-blend-mode: luminosity;
	transition: inherit;
	transition-property: filter
}

figcaption {
	z-index: 2;
	padding: 0 .5em;
	opacity: var(--hov);
	background: #fff6;
	font: Max(.625em, .625rem, 4.5cqw)/ 2 sans-serif;
	backdrop-filter: blur(4px);
	
	a { color: #780116 }
}

footer {
	padding-top: var(--dy);
	text-align: center;
	clip-path: 
		polygon(100% 100%, 0 100%, 
			0 calc(var(--dy0)), 100% calc(var(--dy1)))
}

b {
	font: 700 2.5em tangerine;
	text-shadow: 1px 1px 2px #000
}

p {
	max-width: 35em;
	
	a { color: #f7b538 }
	a:is(:focus, :hover) { color: lightskyblue }
}

/* just support info */
aside {
	position: fixed;
	bottom: 0;
	padding: 1em;
}

.box-info-scrollani {
	margin: 1em;
	border-left: solid 5px #dc3055;
	padding: 1em;
	box-shadow: 2px 2px 5px hsla(0, 0%, 0%, .35);
	background: #851d40;
	color: #fff;
	font: 1.25em/ 1.25 ubuntu, trebuchet ms, arial, sans-serif;
	
	@supports (animation-timeline: scroll()) { display: none }
}

kbd {
	padding: 2px;
	background: hsla(0, 0%, 0%, .35);
	font: 1.1em/ 1.2 ubuntu mono, consolas, monaco, monospace
}
</style>


  
  
</head>

<body translate="no">
  <header>
  <svg width="0" height="0" aria-hidden="true">
    <filter id="dissolve" primitiveUnits="objectBoundingBox" x="-100%" y="-100%" width="300%" height="300%" color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="7.13" result="noise"></feTurbulence>
      <feFlood flood-color="rgba(50%, 50%, 0%, calc(1 - var(--out)))"></feFlood>
      <feBlend in2="noise"></feBlend>
      <feDisplacementMap in="SourceGraphic" scale=".25" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
    </filter>
  </svg>
  <h1>Pure CSS on scroll tilt & zoom grid</h1><em>scroll down</em>
</header>
<main>
  <figure><img src="https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?w=400" alt="lots of poppies in a field" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/orange-flowers-IicyiaPYGGI" target="_blank">Henry Be</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1505820013142-f86a3439c5b2?w=400" alt="fly agaric, a large white-gilled, white-spotted red mushroom" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/red-and-white-mushroom-Dm-qxdynoEc" target="_blank">Florian van Duyn</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1471879832106-c7ab9e0cee23?w=400" alt="macro photography of drop of water on top of unfurled leaf" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/macro-photography-of-drop-of-water-on-top-of-green-plant-Kp9z6zcUfGw" target="_blank">Aaron Burden</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1518963534257-f901d4d46f59?w=400" alt="purple crocus rising from the snow" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/purple-flowers-photo-MVr6pgZzlbY" target="_blank">Johannes Plenio</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1493166228553-4fa0fdb916e8?w=400" alt="tree trunks and fallen leaves on the forest floor" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/tree-trunks-and-fallen-leaves-on-the-forest-floor--UmCb7gAAUI" target="_blank">Craig Strahorn</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1483206048520-2321c1a5fb36?w=400" alt="lightning during nighttime, turning sky purple" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/lightning-during-nighttime-t9LjTYOTw_g" target="_blank">Jorge Rojas</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?w=400" alt="conifer sapling close-up" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/selective-photography-of-green-leaf-plant-Rfflri94rs8" target="_blank">Matthew Smith</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1475776408506-9a5371e7a068?w=400" alt="massive ash cloud above erupting volcano" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/volcano-eruption-during-daytime-qexZLgMcbPc" target="_blank">Yosh Ginsu</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1457270508644-1e4905fabd7e?w=400" alt="crystal structure of snowflakes" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/selective-focus-photography-snowflakes-9yhy1FXlKwI" target="_blank">Aaron Burden</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1496851925983-9c879a7038de?w=400" alt="macro photography of dandelion" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/macro-photography-of-dandelion-NTbZzC7FuRw" target="_blank">Luca Campioni</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1539634262233-7c0b48ab9503?w=400" alt="view of sea stacks and an islet further away whose peaks disappear into the clouds from across the water" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/rock-formation-on-body-of-water-8zD7rs8UpxU" target="_blank">Sebastian Boring</a></figcaption>
  </figure>
  <figure><img src="https://images.unsplash.com/photo-1506057213367-028a17ec52e5?w=400" alt="dramatic sky with dark clouds partly lit up in red" loading="lazy"/>
    <figcaption>by <a href="https://unsplash.com/photos/black-and-red-clouds-n20DUSVsUk8&quo.........完整代码请登录后点击上方下载按钮下载查看