div+css布局实现滚动网页相册瀑布流交互效果代码
代码语言:html
所属分类:画廊相册
代码描述:div+css布局实现滚动网页相册瀑布流交互效果代码
代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0