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