Skip to content

Commit

Permalink
repo refractor
Browse files Browse the repository at this point in the history
  • Loading branch information
@QC20
QC20 committed Jun 30, 2024
1 parent 54b58a4 commit 1b91a48
Show file tree
Hide file tree
Showing 2 changed files with 208 additions and 53 deletions.
117 changes: 64 additions & 53 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,64 @@
<h1>scroll.</h1>
<ul>
<li><img src="https://picsum.photos/900/1200?random=1" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=2" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=3" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=4" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=5" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=6" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=7" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=8" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=9" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=10" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=11" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=12" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=13" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=14" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=15" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=16" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=17" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=18" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=19" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=20" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=21" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=22" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=23" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=24" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=25" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=26" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=27" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=28" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=29" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=30" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=31" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=32" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=33" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=34" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=35" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=36" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=37" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=38" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=39" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=40" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=41" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=42" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=43" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=44" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=45" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=46" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=47" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=48" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=49" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=50" alt="" /></li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Gallery</title>
<link rel="stylesheet" href="src/styles/styles.css">
</head>
<body>
<h1>scroll.</h1>
<ul>
<li><img src="https://picsum.photos/900/1200?random=1" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=2" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=3" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=4" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=5" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=6" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=7" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=8" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=9" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=10" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=11" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=12" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=13" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=14" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=15" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=16" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=17" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=18" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=19" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=20" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=21" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=22" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=23" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=24" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=25" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=26" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=27" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=28" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=29" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=30" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=31" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=32" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=33" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=34" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=35" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=36" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=37" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=38" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=39" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=40" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=41" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=42" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=43" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=44" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=45" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=46" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=47" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=48" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=49" alt="" /></li>
<li><img src="https://picsum.photos/900/1200?random=50" alt="" /></li>
</ul>
</body>
</html>
144 changes: 144 additions & 0 deletions src/styles/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
*,
*:after,
*:before {
box-sizing: border-box;
}

[data-theme='light'], html {
--overlay: hsl(0 0% 0% / 0.15);
--button: color-mix(in lch, canvas, hsl(190 60% 80%));
color-scheme: light only;
background: white;
}

[data-theme='dark'] {
--overlay: hsl(0 0% 100% / 0.23);
--button: color-mix(in lch, canvas, hsl(190 60% 40%));
color-scheme: dark only;
background: black;
}
@media (prefers-color-scheme: dark) {
html {
--overlay: hsl(0 0% 100% / 0.23);
--button: color-mix(in lch, canvas, hsl(190 60% 40%));
color-scheme: dark only;
background: black;
}
}

body {
display: grid;
place-items: center normal;
min-height: 100vh;
font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
Helvetica, Arial, sans-serif, system-ui;
}

body::before {
--size: 45px;
--line: color-mix(in lch, #8b8b8b, transparent 65%);
content: '';
height: 100vh;
width: 100vw;
position: fixed;
background: linear-gradient(
90deg,
var(--line) 1px,
transparent 1px var(--size)
)
50% 50% / var(--size) var(--size),
linear-gradient(
var(--line) 1px,
transparent 1px var(--size)
)
50% 50% / var(--size) var(--size);
mask: linear-gradient(-20deg, transparent 50%, white);
top: 0;
transform-style: flat;
pointer-events: none;
z-index: -1;
}

:root {
--size: 40;
--radius: .5rem;
--img-size: calc(var(--size) * 1rem);
--list-size: calc(--size / 2);
--card: 1vw;
--card-size: 300px;
timeline-scope: --list;
}

h1 {
position: fixed;
top: 50%;
right: 50%;
margin: 0;
translate: calc(-150%) -50%;
rotate: -90deg;
animation: fade both linear;
animation-timeline: --list;
animation-range: 0 80px;
}

ul {
scroll-snap-type: x mandatory;
height: 100vh;
width: 100vw;
container-type: inline-size;
scroll-timeline: --list inline;
align-items: center;
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
gap: 1rem;
overflow: auto;
padding-inline: calc(50cqi - (var(--card-size) * 0.5));
scroll-padding-inline: calc(50% - (var(--card-size) * (var(--padding))));
}

ul li {
width: var(--card-size);
height: var(--card-size);
scroll-snap-align: center;
aspect-ratio: 9 / 16;
border-radius: var(--radius);
flex: 1 0 var(--card-size);
overflow: hidden;
position: relative;
}

@supports (animation-timeline: scroll()) {
:root {
--offset: 0;
}

li {
view-timeline: --item inline;
}

img {
width: 300%;
height: 300%;
object-fit: cover;
top: 50%;
position: absolute;
translate: 0 -50%;
right: 0;
animation: p both linear;
animation-timeline: --item;
}

}
@keyframes fade {
to {
opacity: 0;
filter: blur(20px);
}
}
@keyframes p {
cover 100% {
translate: calc((100% - var(--card-size)) * var(--travel, 1)) -50%;
}
}

0 comments on commit 1b91a48

Please sign in to comment.